Question

因此，我没有使用HTML向导航栏添加活动类，而是希望通过jQuery添加它，但我的代码似乎不起作用。

$('.navbar-nav li a[href="' + location.pathname + '"]').addClass('active');

<nav> 
  <ul class="navbar-nav">
    <li class="nav-item" >
      <a class="nav-link active" href="">Home</a>
    </li> 
    <li class="nav-item">
      <a class="nav-link" href="">Wat is het?</a>
    </li>
  </ul>
</nav>

有人可以帮帮我吗？

Answer 1

也许你可以这样做：

$(function() {
  var currentLoc = window.location.href;
  if(/PageYouWant/.test(currentLoc) {
    $('.navbar-nav li a').addClass('active');
  }
});

Answer 2

我认为你需要的是window.location.href。像这样：

var pathname =  window.location.href;
$('.navbar-nav li a').attr('href',pathname).addClass('active');

选中此示例：https://jsfiddle.net/tbx56gtL/7/

Answer 3

如果要在锚标记中设置活动，可以执行以下选项之一。

每个标签的asign ID
设置数据属性并添加类toggleClassX
使用$（this）.addClass（＆＃34; active＆＃34;）

以下是每个推荐的例子：

1 html：

<nav> 
   <ul class="navbar-nav">
     <li class="nav-item" >
       <a class="nav-link active" id="myId1" href="">Home</a>
    </li> 
    <li class="nav-item">
      <a class="nav-link" id="myId2" href="">Wat is het?</a>
    </li>
  </ul>
</nav>

2 html：

<nav> 
  <ul class="navbar-nav">
    <li class="nav-item" >
      <a class="nav-link toggleClass1 active" data-tclass="1" href="">Home</a>
    </li> 
    <li class="nav-item">
      <a class="nav-link toggleClass2" data-tclass="2" href="">Wat is het?</a>
    </li>
  </ul>
</nav>

3 html：你的结构适用于最后一个例子

1 js：

$("element").click(function(){
  $("#myId1").addClass("active")
});

2 js：

$(".nav-link").click(function(){
  var tclass = $(this).data("tclass)
$(".toggleClass"+tclass).addClass("active")
});

3 js：

$(".nav-link").click(function(){
 $(this).addClass("active")
});

希望以上回答你的问题。

jQuery将活动类添加到导航栏不起作用

3 个答案: