Question

我想在几个链接上切换类。请考虑以下标记：

<ul class="inline toggleNav">
    <li><a class="active" id="imagesLink" href="#">Images</a></li>
    <li><a class="noLink" id="desLink" href="#">Description</a></li>
</ul>

以及以下jQuery：

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

现在这将以一种方式交换类，但不是两种方式交换类？所以，当我单击描述类交换但是当我点击图像后，没有任何反应？

Answer 1

这是因为您只绑定了一次事件，并且仅在页面加载时.noLink链接上（因此'图像'没有事件）。

您应该使用委托而不是直接绑定：

$('.toggleNav').on('click', '.noLink', function(){})'

如果您不想使用委托，则需要在每个a上绑定事件并使用此代码：

$('.toggleNav a').click(function(){
    if(!$(this).is('.noLink')) return;
    $('.active').addClass('noLink');
    $('.active').removeClass('active');         
    $(this).addClass('active');
    $(this).removeClass('noLink');
 });

可以减少为：

$('.toggleNav a').click(function(){
    if($(this).is('.noLink'))
        $('.toggleNav a').toggleClass('active noLink');
 });

小提琴：http://jsfiddle.net/F5ZSA/9/

Answer 2

绑定click处理程序时，您只需在加载页面时将其绑定到具有noLink类的元素。由于您正在动态更改类，因此您需要使用事件委派，以便绑定将遵循更改的类。

$(".toggleNav").on("click", ".noLink", function(){
    $('.active').addClass('noLink');
    $('.active').removeClass('active');         
    $(this).addClass('active');
    $(this).removeClass('noLink');
});

Answer 3

    <ul class="inline toggleNav">
    <li><a class="" id="imagesLink" href="#">Images</a>
    </li>
    <li><a class="" id="desLink" href="#">Description</a>
    </li>
     <li><a class="" id="desLink" href="#">test</a>
    </li>
     <li><a class="" id="desLink" href="#">1</a>
    </li>
</ul>

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

示例在这里：Example

Answer 4

您有jQuery.toggleClass()的确切需求：

$( "#foo" ).toggleClass( className, addOrRemove );

等于

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

jQuery切换链接

4 个答案: