使用jQuery更改具有默认值的链接类

时间:2011-10-29 13:59:14

标签: javascript jquery

我有三个手动设置类的链接:一个默认为.active,其他默认为.inactive。我有一些jQuery,我用它来切换链接的类,当它们被点击为CSS目的。这适用于.inactive个链接 - 它们会切换到.active。但是,它不适用于默认的.active链接。如果我点击默认的.active链接,它将保持不活动状态。

默认加载:

链接1 - 活动 链接2 - 无效 链接3 - 无效

点击链接2:

链接1 - 无效 链接2 - 活动 链接3 - 无效

点击链接2中的链接1:

链接1 - 无效 链接2 - 活动 链接3 - 无效

如何完成此循环以使其有效?

以下是我正在生成的HTML:

<ul id="infoContainer">
  <li><a href="/profiles/1/profile_cred" class="active" data-remote="true">Cred</a></li>
  <li><a href="/profiles/1/profile_about" class="inactive" data-remote="true">About</a></li>
  <li><a href="/profiles/1/profile_questions" class="inactive" data-remote="true">Questions</a></li>
</ul>

我正在使用的jQuery:

$(function(){
    var sidebar=$('#sidebar');
    sidebar.delegate('a.inactive', 'click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

1 个答案:

答案 0 :(得分:2)

如果我确实让你纠正,那么你的选择器太严格了:只处理inactive链接 试过以下几点?

$(function(){
    var sidebar=$('#sidebar');
    sidebar.delegate('a', 'click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).addClass('active').removeClass('inactive');
    });
});