使用Jquery一次切換一個錨鏈接

Question

想要toggle活動的班級，因此當我單擊頁面上的一個鏈接時，一次單擊整個鏈接時，一次只有一個鏈接對班級是有效的。 有人可以幫我提出一個可行的解決方案，添加到我的代碼中嗎？

的JavaScript

//Global definition
var activeState = $(".category-tree-with-article .article-list > li > a");
activeState.on('click', function (e) {
    e.preventDefault;
    // For class changes
    activeState.toggleClass('active');
});

的CSS

.active {
    font-family:'MaxPro'
}

Answer 1

刪除所有其他鏈接上的課程，然后在單擊的鏈接上添加課程

var activeState = $(".category-tree-with-article .article-list > li > a");

activeState.on('click', function (e) {
    e.preventDefault;
    activeState.removeClass('active');
    $(this).addClass('active');
});

Answer 2

如果您只想執行當前操作，請更改-

activeState.toggleClass('active');

為此-

activeState.removeClass('active');    
$(this).toggleClass('active'); // can still turn on and off on this element

Answer 3

在這種情況下，請勿使用toggle

var links = $('.selector-to-your-links');
links.on('click', function(e) {
    var link = $(this);
    link.addClass('active');
    links.not(link).removeClass('active');
    return false; // I like this better than e.preventDefault() as it also does e.stopPropagation()
});