jQuery添加删除类

Question

我有4个锚点，当单击其中一个时，我想将当前所选锚点添加类current，并同时从其他3个锚点中删除该类。以下是我的代码。我做错了什么？

if ($("ul#thumb a").hasClass("current") {
    $("ul#thumb a").removeClass("current");
    $(this).addClass("current");
});

我的HTML代码如下：

<ul id="thumbs">
    <li>
        <!-- intro page navi button -->
        <a id="t0" class="active" name="t0">The Company</a>

        <ul class="navi">
            <li><a style="display:none"></a></li>
            <li><a id="t1" name="t1">The Brief</a></li>
            <li><a id="t2" name="t2">The Solution</a></li>
            <li><a id="t3" name="t3">The Result</a></li>
        </ul>

    </li>
</ul>

- mtwallet

---

你的HTML长什么样？ - Sampson

到底是哪里出了问题？它没有移除类还是没有添加类？此外，这似乎不是完整的jQuery。你需要一些类似于 $('ul#thumb a').click(function() {...}); 的东西来包装它。 - Topher Fangio

@Topher 我已修改了我的帖子以展示我的HTML。 - mtwallet

我已经更新了我的答案以反映您的HTML。 - Sampson

@Jonathan，非常感谢您的帮助。但是我想实现的是在上面的HTML中，当单击btns命名为#t0、#t1、#t2和#t3时，它们都应用active类，而不仅仅是#t0。您有什么想法可以实现这个功能吗？ - mtwallet

Answer 1

通过使用事件委托，我们仅绑定一个处理程序来处理所有点击事件。当用户点击除了当前锚点（.current）之外的另一个锚点时，我们会将当前锚点的类去掉，并将被点击的锚点设为新的当前锚点。

$("#thumbs").on("click", "a:not(.current)", function ( event ) {
    $(".current", event.delegateTarget).removeClass("current");
    $(this).addClass("current");
});

- Sampson

---

@Jonathan Sampson，e.preventDefault();是什么意思？顺便点个赞。 - ant

@c0mrade：它防止链接的默认操作。 - Sampson

Answer 2

我觉得这会对你有帮助

$("a").click(function() {
  $('a').removeClass('current');
  var id = $(this).attr('id');
  $('#'+id).addClass('current');
});

- Raghvendra

---

你为什么要混用 $ 和 jQuery？你应该选择一个并坚持使用它。 - Lix

抱歉，这是一个错误。 - Raghvendra