jquery - 在导航中使用 jQuery 添加和删除类

Question

我有一个简单的导航。我想在单击的导航项周围有一个红色边框。例如：如果您单击商店，则商店一词周围应该有一个红色边框。然后，如果您单击另一个导航项 Contact，红色边框应该从 Store 上移到 Contact 项上。这是我到目前为止所拥有的。

HTML：

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS：

.active {
  border: 2px solid red;
  padding: 5px;
}

JS：

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

在 jQuery 中不是很强大。任何帮助都会很棒...谢谢！

score 3 · Accepted Answer

您的 JS 正在添加该类，然后立即将其从同一元素中删除。试试这个

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

score 3 · Accepted Answer

此代码应该是您要查找的内容：

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

score 0 · Accepted Answer

如果您的锚标记占用了整个列表项容器空间，那么您将需要这样做：

$('.nav li a').click(function() {
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
});

3 回答 3