Question

我已经编写了导航代码。我想检查哪个类是活动的，根据它应该为相应的选项卡设置蓝色

我的代码

＆＃13;

$(function() {
  var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  $("#tslcNav ul li a").each(function() {
    if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
      $(this).addClass("active");
  })
});

＆＃13;

.tslcNav li:hover,
.tslcNav li.active,
.tslcNav li.active {
  background: none;
  border-color: #009FD6;
  color: #009FD6;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="tslcNav" role="navigation">
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="manage.html">Manage </a></li>
      <li><a href="welcome.html">welcome/a></li>
          <li><a href="security.html">Security </a></li>
    </ul>
  </div>
  <!--/.nav-collapse -->
</div>

＆＃13;

Answer 1

您将活动放在元素上，而不是列表中将您的javascript代码更改为：

$(function() {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
    $(".tslcNav ul li a").each(function(){
         if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
         $(this).parent().addClass("active");
    })
});

Answer 2

那是因为你正在为锚元素添加类active。并且您的选择器将li元素作为活动类。因此，您需要将类active添加到parent li，而不是将其添加到anchor元素。您可以在此处使用.closest()或.parent()：

 $(this).closest('li').addClass("active");

根据子元素href属性将活动类设置为元素

2 个答案: