How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript [ANSWERED]

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

Asked By: user3030105
Originally Asked On: 2014-01-02 08:42:07
Asked Via: stackoverflow

How to highlight selected menu item in html using jquery or javascript.
the following is menu.html.

<div id="cssmenu">
<ul>
    <li id="m1"><a href="company.html">COMPANY</a></li>
    <li id="m2"class="has-sub"><a href="services.html">SERVICES</a></li>
    <li id="m3"class="has-sub"><a href="abotus.html">ABOUT US</a></li>
    <li id="m4"class="has-sub"><a href="contact.html">CONTACT US</a></li>
 </ul>
</div>

<script type="text/javascript">
  function makeactive(id) {
    m1=document.getElementById('m1');
    m2=document.getElementById('m2');
    m3=document.getElementById('m3');
    m4=document.getElementById('m4');
    document.getElementById('m4').addClass("selected");
  }
</script> 

He received 5 answers
eventually accepting:

‘s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

The answer with the highest score with 1 points was:

San Krish’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

You can use jQuery to add events for your selection , For example if your “anchor” tags are clicked . You can change their colors to highlight them,

jQuery

$(document).ready(function(){
  $("a").click(function(){
    $("a").addClass("yellow");
  });
});

CSS

.yellow
{
color:yellow;
}

Hope this Helps!

If the selected answer did not help you out, the other answers might!

All Answers For: How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

Green Wizard’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

If you are using some java script you may add a class “active” to the menu item selected and may style it in your css.

Also you should remove class active for all the other menu items.

Felix’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

Try to do like this:

$(document).ready(function() {
    $("#cssmenu li").click(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
    });
});

San Krish’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

You can use jQuery to add events for your selection , For example if your “anchor” tags are clicked . You can change their colors to highlight them,

jQuery

$(document).ready(function(){
  $("a").click(function(){
    $("a").addClass("yellow");
  });
});

CSS

.yellow
{
color:yellow;
}

Hope this Helps!

Roko C. Buljan’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

Your DOM is not read while you’re trying to addClass so try with a document.ready function:

jQuery(function( $ ){ // DOM ready

  function makeactive(id) {
    $('#cssmenu li').removeClass('selected');
    $(id).addClass("selected");
  }

  makeactive("#m4"); // use this function call wherever you need

});

patel.milanb’s answer to

How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript

Working Jsfiddle: http://jsfiddle.net/YZbU4/

the logic is: first remove the CSS class from every li a and then add class to currently selected a element.

$(document).on("click", "#cssmenu li a", function (e) {
    e.preventDefault();
    $('#cssmenu li a').removeClass("active");
    $(this).addClass('active');
});

CSS: depending on your requirement

.active {
    color: #D09d23;
    font-weight: bold;
}

Of course, you should really check out the original question.

The post How to highlight selected menu item in html. here i created menu list in separate file and included that file in my html file using javascript [ANSWERED] appeared first on Tech ABC to XYZ.