Question

遇到问题，我在页面上有一个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>

CSS

#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>

Answer 1

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

#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')
    })
}

Answer 2

这是一个学习的好机会。 Diodeus＆＃39;答案是完全正确的，但他的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')
  })
}

这只是一个非常短的代码，现在想象你用这种风格写整个网络。它会明显变慢，消耗更多的资源。

如果您坚持使用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是一个live collection，这是任何javascript库都无法实现的，它是在底层且更有效的浏览器代码中实现的。

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

在上面的代码中，可以轻松删除jQuery：

1：$(document).ready(handler) - ＆gt; document.addEventListener("readystatechange",handler);

2：$('#switchables a') - ＆gt; document.querySelectorAll("#switchables a");

3：$(nodeList).click(handler) - ＆gt;

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

4：$(node).removeClass(className) - ＆gt; node.classList.remove(className)

5：$(node).addClass(className) - ＆gt; node.classList.add(className)

这是几个字符更长。但它更具有可重用性，可读性和有效性，而且不是上帝对象或Cargo cult编程。

上面的本机代码是javascript标准，并且在任何体面的浏览器中都受支持。三年前，当Diodeus提供他的答案时，IE8是一个问题。但它现在已经死了（根据gs.statcounter，全球不到2％）。通过不支持它来帮助它完全死亡。

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

2 个答案: