javascript - 如何使用 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>

我需要做的是应用一个类，该类在被单击的链接上显示下划线，如果另一个链接被单击，该类就会离开。不幸的是，我无法通过点击让类(class)保持在场状态。

我试过这个:JS Onclick Add Class

但是 OP 正在使用 onclick 来锁定。

我最终得到的是:

$(".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>