Question

我使用小Javascript来允许我在我的网站的链接下绘制一条线。

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

因此，您可以看到它只是在选定的li下添加一行。问题是我的页面中有另一个列表，所以它也在这些项目下添加了一行，我不想这样做。

如何让我的Javascript在导航类中仅在项目下添加一行？

Answer 1

你可以这样做。

使其更具体。因此，仅当点击定位到具有等级li的{{1}}时才会触发事件。

如果nav-item在其他nav-item之间也很常见，则可以在li上添加另一个类，以触发事件。

li

Answer 2

将点击处理程序绑定到类class="nav-item"而不是li，这样它只会在您的情况'nav-item`

下划线并点击具有特定类名的li

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

Answer 3

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

 <ul id="line-container" 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>

您可以在用于显示行的ul（或类别）周围添加“Id”，并使用上述

指定

导航下的Javascript行

3 个答案: