如何使用 JS 或 jQuery 将类应用于列表项，而无需通过 id 抓取并保持活动状态

Question

所以我使用的CMS不允许我在a标签上应用onclick或使用onclick。所以它基本上以如下所示的代码输出：

<ul class="ul-class" id="ul-id">
 <li class="nav-items"><a href="1">Something1</a></li>
 <li class="nav-items"><a href="2">Something2</a></li>
 <li class="nav-items"><a href="3">Something3</a></li>
 <li class="nav-items"><a href="4">Something4</a></li>
 <li class="nav-items"><a href="5">Something5</a></li>
</ul>

我需要能够做的是应用一个类，在单击的链接上显示下划线，如果单击了另一个链接，则离开。不幸的是，我无法让班级通过点击保持存在。

我试过这个：JS点击添加类

但是 OP 正在使用点击来锁定。

我最终得到的是：

$(".nav-items").click(function (e) {
$(this).addClass("nav-active").siblings().removeClass("nav-active");
 });

然后对于 CSS，我有：

a.nav-active{
 border-bottom: 5px solid green;
 padding-bottom: 10px;
 }

边界弹出，但立即离开。代码是否有问题，或者我是否需要添加其他内容以使边框永久化，除非单击其他地方？

Answer 1

你可以执行以下操作：

注意：您必须使用.nav-active而不是a.nav-active，因为您的.nav-active是<li>的，并且是<a>

$(function() {
  $(".nav-items").click(function(e) {
    e.preventDefault(); /* To prevent redirect of <a> */
    $(".nav-items").removeClass("nav-active"); /* Remove the class to all nav-items */
    $(this).addClass("nav-active"); /* Add the class to clicked nav-items*/
  });
});

.nav-active {
  border-bottom: 5px solid green;
  padding-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-class" id="ul-id">
  <li class="nav-items"><a href="1">Something1</a></li>
  <li class="nav-items"><a href="2">Something2</a></li>
  <li class="nav-items"><a href="3">Something3</a></li>
  <li class="nav-items"><a href="4">Something4</a></li>
  <li class="nav-items"><a href="5">Something5</a></li>
</ul>

Answer 2

一种

使用普通JavaScript的可能方法

var myItems = Array.from(document.querySelectorAll(".nav-items")); // make array from NodeList
myItems.forEach(navItem => navItem.addEventListener("click", event => {
    myItems.forEach(maybeSelectedBefore => maybeSelectedBefore.classList.remove("nav-active"));
    event.target.classList.toggle("nav-active", true);
});

Answer 3

我不得不反转您的 CSS(.nav-active a 而不是 a.nav-active (并将e.preventDefault();添加到 jQuery 中，但除此之外它似乎可以工作。在添加类之前先删除它不会有什么坏处，所以改变

$(this).addClass("nav-active").siblings().removeClass("nav-active");

自

$(this).siblings().removeClass("nav-active");
$(this).addClass("nav-active");