点击时使用Jquery添加/删除类

Question

我想在菜单中点击元素时添加一个类[active]，然后在点击菜单中的新项目时删除该类[active]并将其添加到新项目。

我尝试过 $(this).removeClass("active").addClass("active");

$(this).toggleClass("active");

基本上我正在尝试用click事件来创建hover()函数。

编辑：已修复HTML

<ul class="menu">
    <li><span>Three</li>
    <li><span>Two</li>
    <li><span>One</li>
</ul>

- Edward

---

请展示您的标记，这样我们就可以看到菜单项之间的关系。 - Alnitak

$('.active').removeClass('active'); $(this).addClass('active') ？ - Ram

你实际上点击了哪些元素？ - Alnitak

您的标记不正确，您需要在jQuery有效工作之前修复它。您正在使用</div>关闭<li>和<ul>元素。 - Pete Uh

Answer 1

假设一次只有一个 active 元素，并且没有关于您的 DOM 层次结构的进一步了解。

假设一次只有一个 active 元素，并且没有关于您的 DOM 层次结构的进一步了解。

$('.active').removeClass('active');
$(this).addClass('active');

如果DOM层次结构已知，则可以使用更高效的选项。

例如，如果它们都是兄弟节点，您可以使用以下代码：

$(this).addClass('active').siblings('.active').removeClass('active');

- Alnitak

---

你的代码没有涉及到列表项（li元素），而这正是需要添加active类的地方。 - Coby

@Coby 在我写这篇文章时，OP 没有提到 li 项。.menu 类应该代表假设的菜单项，而不是其父容器。 - Alnitak

神奇的解决方案...节省了我很多时间。 - Sudhanshu Saxena

Answer 2

演示 — 工作示例。

已更正您的标记：

<ul class="menu">
  <li><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

假设您想让 LI 标签拥有 active 类。

<script>
$('.menu li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});
</script>

- Coby

---

你假设这些元素是兄弟姐妹，但它们可能不是。 - Alnitak

考虑到原帖缺乏代码或示例，难道您能怪我吗？ - Coby

换句话说，你也做出了假设。在我的答案中，假设的点击项与其他菜单项并排存在。请不要恶意攻击。 - Coby

你所说的那行代码是点击处理程序，与答案无关，因为它是处理程序的主体部分才是重要的。无论如何，你应该记录下你所做出的假设。 - Alnitak

为了提高效率，您的.on处理程序应该是$('.menu').on('click', 'li', ...) - 绑定到document应该只作为最后的选择。 - Alnitak

Answer 3

试试这个小库，你可以使用原生JS切换类吗？ 它会像这样

var menu = document.querySelector('.menu');
menu.addEventListener('click', function () {
  Elemental.toggleClass(this, 'active');
})

它将根据其存在与否添加或删除类。

- Andrey Ponomarenko