Question

例如，如果我有一个下拉导航，我希望活动链接的颜色与导航链接的其余部分不同。类似于：http://www.emerson.edu/。

这是我的jquery代码：

if ($(".testHeader a#" + thisID).hasClass("active")) {
    $(".testHeader a").removeClass("active");
} else {
    $(".testHeader a").removeClass("active");
    $(".testHeader a#" + thisID).addClass("active");
}

我的active类是改变链接颜色的css样式。

我遇到的问题是，如果我点击多个链接，每个链接都会保持活动状态。我实际上只希望在点击时只有一个链接处于活动状态。我的jquery有什么问题？谢谢！

Answer 1

你可以说

$(".testHeader a#"+thisID).toggleClass("active");

Answer 2

使用this。首先在触发事件时删除所有活动类，然后将类添加到当前选定的对象this。

$('a').click(function(){
    $('a').removeClass('active');
    $(this).addClass('active');
});

编辑：要再次点击关闭它，请执行此操作。

$('a').click(function(){
     if($(this).hasClass('active')){
         $(this).removeClass('active');
     }else{
         $('a').removeClass('active');
         $(this).addClass('active');
     }

});

Answer 3

了解这发生的“事件”将会有所帮助。

如果是hover事件。然后你可以做类似的事情：

$('.testHeader a').hover(function(e) { $(this).toggleClass('active'); });

//  However, if any of your links are dynamic or a half dozen other issues, this could misfire
//  Thus I would really suggest the long form as:

$(document).on('mouseenter', '.testHeader a', function(e) {
    $(this).addClass('active');
})
.on('mouseleave', '.testHeader a', function(e) {
    $(this).removeClass('active');
})

如果在click事件中，您可以执行以下操作：

$(document).on('click', '.testHeader a', function(e) {
    $('.testHeader .active').removeClass('active');
    $(this).addClass('active');
})

如何使用jquery切换链接颜色

3 个答案: