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

Question

我在三个链接上手动设置类:一个默认为 .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');
    });
});

Answer 1

如果我没猜错，你的选择器太严格了:只处理 inactive 链接。
尝试过以下方法吗？

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