javascript - 如何更改菜单中按钮的颜色，以便用户知道他所在的页面

Question

这是 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>

这是我认为应该工作的jquery

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

和CSS部分

  .active{
    background-color:#f06f06;;
}
button.btn-group:active{
  background-color:#f06f06;
}

Answer 1

就像其他人所说的那样，HTML 中没有 ID 为 #btn-group 的 div。您将其更改为 jQuery 代码中的 ID，但未更改为 HTML 中的 ID。我用 $ 替换了 jQuery，只是因为它更容易使用。你可以这样做:

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;
    }

看看这个jsfiddle <强> JSFIDDLE