导航下的 Javascript 行

Question

我很少使用 Javascript 来让我在网站的链接下画一条线。

代码如下:

$("li").on("click", function() {
  $("li").removeClass("line");
  $(this).addClass("line");
});

.line {
  border-bottom: 4px solid #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="javascript:void(0)">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
  </li>
</ul>

如您所见，它只是在选定的 li 下添加一行。问题是我的页面中有另一个列表，因此它还在这些元素下添加了一行，但我不希望这样。

我如何让我的 Javascript 在仅来自导航类的元素下添加一行？

Answer 1

将点击处理程序绑定(bind)到类 class="nav-item" 而不是 li 所以它只会下划线并点击 li 与你的案例中的特定类名 'nav-item`

$(".nav-item").on("click", function() {
  $(".nav-item").removeClass("line");
  $(this).addClass("line");
});

.line {
  border-bottom: 4px solid #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="javascript:void(0)">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
  </li>
</ul>