如何使特定按钮保持活动状态？CSS、Javascript

有一个问题，我在一个页面上有一个javascript内容切换器，但我似乎无法让一件事正常工作——如何使单击的按钮在单击后保持活动状态

这里有一个代码： JS

<script type="text/javascript">
function switch1(div) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
if (document.getElementById(option[i])) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}

window.onload=function () {switch1('one');}
</script>

#switchables li a {
    color: #262626;
    text-decoration: none;
    display: inline-block;
    padding-top: 14px;
    padding-right: 34px;
    padding-bottom: 10px;
    padding-left: 33px;
    background-image: url(img/catButBcgr.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: none;
    border-right-color: #E1E1E1;
    border-left-color: #FFF;
}
#switchables li a:hover {
    background-image: url(img/catButBcgrH.jpg);
}
#switchables li a:active {
    background-image: url(img/catButBcgrA.jpg);
}

HTML

 <ul id="switchables">
   <li><a class="active" href="javascript:void[0];" onclick="switch1('one');">OVERVIEW</a></li>
   <li><a class="active" href="javascript:void[0];" onclick="switch1('two');">CATEGORY</a></li>
   <li><a class="active" href="javascript:void[0];" onclick="switch1('three');">CATEGORY</a></li>
</ul>

您需要创建一个“活动”类，并在单击时将其添加到按钮中

#switchables a:active, #switchables a.active {
    background-image: url(img/catButBcgrA.jpg);
}

使用jQuery很容易：

$(document).ready(function() {
    myInit()
})

function myInit() {
    $('#switchables a').click(function() {
        $('#switchables a').removeClass('active')
        $(this).addClass('active')
    })
}

---

这是一个很好的学习机会。Diodeus的回答完全正确，但他的jQuery代码在后台做了可怕的事情，请参见注释：

$(document).ready(function() {
    myInit()
})

function myInit() {
  // on the following line, jQuery creates an array of objects (a tags)
  // (costly operation!) and adds click listener to each of them
  $('#switchables a').click(function() {
    // on the following line, jQuery creates the crazy God object again
    // and throws it off after this command
    // for each a tag and tries to remove class active from it
    // in only one case it actually does something - mere class removal
    // btw removeClass is ridiculous function if you dig into jQuery 1.10 source  
    $('#switchables a').removeClass('active')
    // this = the source of click event, not jQuery object
    $(this).addClass('active')
  })
}

这只是一段很短的代码，现在想象一下你用这种风格来编写整个web。它的速度会明显减慢，消耗更多的资源

如果您坚持使用jQuery，请尝试编写一点可重用代码：

function myInit() {
  // jQuery object is created only once
  var $anchors = $('#switchables a');
  $anchors.click(function() {
    // ...and reused here
    $anchors.removeClass('active')
    $(this).addClass('active')
  });
}

但是使用本机javascript会做得更好

var items = document.querySelectorAll("#switchables a");
var prev = items[0];
[].forEach.call(items,function(item) {
  item.addEventListener("click",function() {
    // no need to loop every a tag here
    prev.classList.remove("active");
    item.classList.add("active");
    // remember previous active a tag
    prev = item;
  });
});

document.querySelectorAll

是任何javascript库都无法实现的功能，它是在浏览器的底层和更有效的代码中实现的

建议在熟悉Javascript之前不要使用jQuery。没有这些知识，你将能够实现基本的动画，复制和粘贴一些插件，什么都没有。当您在某种程度上了解Javascript时，您可能不会再看到使用jQuery的理由了

在上面的代码中，jQuery可以很容易地删除：

1:

$（document）.ready（handler）

->

document.addEventListener（“readystatechange”，handler）

2:
$（“#切换表a”）
->
文档。queryselectoral（“#切换表a”）

3:
$（节点列表）。单击（处理程序）
->

[].forEach.call(nodeList,function(node) {
  // you can reuse node here, unlike the jQuery
  node.addEventListener("click",handler);
});

4:
$（节点）.removeClass（类名）
->
节点.classList.remove（类名）

5:
$（节点）.addClass（类名）
->
节点.classList.add（类名）

它长了几个字符。但它更具可重用性、可读性和有效性，而且它不是上帝对象或货物崇拜编程

上面的本机代码是javascript标准，在任何像样的浏览器中都受支持。三年前，当迪奥多斯给出答案时，IE8在这里是一个问题。但现在它已经死了（根据gs.statcounter的数据，全世界不到2%）。通过不支持它来帮助它完全消失。
谢谢，但当我这样做时，所有按钮现在都处于活动状态。我不知道你到底在做什么。没有加载新的html或w/e，只有某些div元素。$（“#switchables a”）。removeClass（'active'）应该清除它们。可能它与您的菜单HTML不匹配。把它贴在问题里，我来看看。添加了html。也许我把jQuery代码放错了，等等，我在这些方面没有太多经验。把它放进去-对吗？是的，把jQuery脚本放在你的脑子里，你还需要把你的代码包装在“dom就绪”中，在你的页面完全加载后运行。如果在加载HTML之前运行脚本，它可能无法工作。请参见这里的操作方法：我应该如何将特定的jquery代码包装到dom ready中？因为顶行是“$（'#switchables a'）。单击（function（）{”），我不知道如何将“document ready”包含在其中。。。