html - 在导航中显示 'active' 选项卡

Question

我试图在我的导航栏上显示 active 标签。它显示在所有选项卡上，除了带有下拉菜单的选项卡。我不明白为什么它不在这个特定按钮上调用类。我显然把它放在了错误的地方。对此问题的任何帮助将不胜感激!

代码:(第一个是正确的 - 即 - index.php 当前处于事件状态。我将代码 (class="active") 放在哪里下一个按钮(我们做什么)单击时的事件选项卡？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
  <ul class="list-inline">
    <li class="active">
      <a href="index.php"><i class="fa fa-home"> </i>HOME</a>
    </li>
    <li class="dropdown" role="presentation"> 
      <a href="#" data-toggle="dropdown">WHAT WE DO <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="whatwedo_qualitative.php">QUALITATIVE</a></li>
        <li><a href="whatwedo_quantitative.php">QUANTITATIVE</a></li>
      </ul>
    </li>
    <li> <a href="wherewework.php">WHERE WE WORK</a></li>
    <li> <a href="ourclients.php">OUR CLIENTS </a></li>
    <li> <a href="contactus.php">CONTACT US</a></li>		
  </ul>
</nav>

Answer 1

如果我理解正确，您需要检查 URL。 (在我的演示中，我将它设置为特定的 URL)然后，将一个类添加到 li 父级。

var page = 'whatwedo_qualitative.php';

var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar-default">
  <ul class="nav navbar-nav list-inline">
    <li>
      <a href="index.php"><i class="fa fa-home"> </i>HOME</a>
    </li>
    <li class="dropdown" role="presentation"> 
      <a href="#" data-toggle="dropdown">WHAT WE DO <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="whatwedo_qualitative.php">QUALITATIVE</a></li>
        <li><a href="whatwedo_quantitative.php">QUANTITATIVE</a></li>
      </ul>
    </li>
    <li> <a href="wherewework.php">WHERE WE WORK</a></li>
    <li> <a href="ourclients.php">OUR CLIENTS </a></li>
    <li> <a href="contactus.php">CONTACT US</a></li>		
  </ul>
</nav>