如何使特定按鈕保持活動狀態？ CSS，Javascript

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的答案是完全正確的，但他的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是一個實時集合 ，它是任何javascript庫都無法實現的，它是在底層和更有效的瀏覽器代碼中實現的。

建議在你熟悉Javascript之前不要使用jQuery。 沒有這些知識，您將能夠實現基本的動畫，復制和粘貼一些插件，僅此而已。 當你在某種程度上了解Javascript時，你可能會發現使用jQuery的理由很少。

在上面的代碼中，可以輕松刪除jQuery：

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

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

3： $(nodeList).click(handler) - >

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

4： $(node).removeClass(className) - > node.classList.remove(className)

5： $(node).addClass(className) - > node.classList.add(className)

這是幾個字符更長。 但它更具有可重用性，可讀性和有效性，而且不是上帝對象或Cargo cult編程。

上面的本機代碼是javascript標准，並且在任何體面的瀏覽器中都受支持。 三年前，當Diodeus提供他的答案時，IE8是一個問題。 但它現在已經死了（根據gs.statcounter，全球不到2％）。 通過不支持它來幫助它完全死亡。