how to change the color of a button in a menu so user knows which page he is in

user_13456503 0
Viewed 50

here is the html

  <div class="btn-group" style="width:100%">
        <a href="#Home" style="width:10%" class="button">home</a>
        <a href="#Hobbies" style="width:10%" class="button">Hobbies</a>
        <a href="#contact_us " style="width:10%" class="button">Contact</a>
        <a href="#services" style="width:10%"class="button">Services</a> 
        <a href="#surprise"><img src="cat.png" id="cat" ></a>
    </div>

here is the jquery i thought should work

    jQuery("#btn-group .button").click(function(){
        jQuery("#btn-group .button").removeClass('active');
        jQuery(this).toggleClass('active'); 
});

and the css part

  .active{
    background-color:#f06f06;;
}
button.btn-group:active{
  background-color:#f06f06;
}
css html jquery javascript
1 Answers

Like the others said there was no div in the HTML with the ID #btn-group. You changed it to an ID the jQuery code but not in the HTML. I replaced jQuery with $, just because it's easier to use. You can do it like this:

JS

$("#btn-group .button").click(function(){
        $("#btn-group .button").removeClass('active');
     $(this).toggleClass('active');         
});

HTML

<div id="btn-group" style="width:100%">
  <a href="#Home" style="width:10%" class="button">home</a>
  <a href="#Hobbies" style="width:10%" class="button">Hobbies</a>
  <a href="#contact_us " style="width:10%" class="button">Contact</a>
  <a href="#services" style="width:10%" class="button">Services</a>
  <a href="#surprise"></a>
</div>

CSS

  .active {
    background-color: #f06f06;
    }

Check out this jsfiddle JSFIDDLE

user_99692460
Related