Question

我有一个正在处理的站点，并且设置了导航项，因此当您单击导航链接时，它将活动类更改为您单击的链接。

这样说，如何在导航栏中将某个链接默认设置为活动状态？

代码：

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

.nav-item a.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>

我对javascript还是很陌生，所以任何帮助都会很棒（即使它不起作用）

编辑：看来我没有添加足够的细节，对不起。

我想让Home导航链接保持活动状态，直到用户单击指向页面另一部分的另一个导航链接为止（我正在考虑滚动浏览网站的不同部分，但这完全是另一个问题）。考虑到这一点，我希望网站功能保持不变，但是当单击其他链接时，默认活动链接会更改。

Answer 1

只需将活动类添加到nav-link

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

.nav-item a.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home
					<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Shop</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

您的代码与单击操作有关，您不希望这样做。您应该使用

$('.nav-item a').addClass("active");

在功能单击主体之外：

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>

CSS：

.nav-item a.active 
{
color: red;
}

JAVASCIPT：

<script>
$('.nav-item a').addClass("active");
</script>

在用户单击导航链接之前，如何将导航栏项默认设置为活动状态？

2 个答案: