在导航上显示“活动”选项卡答案

【问题标题】：Showing 'active' tab on navigation在导航上显示“活动”选项卡
【发布时间】：2016-07-17 13:43:05
【问题描述】：

我正在尝试在导航栏上显示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>

【问题讨论】：

标签： html css class twitter-bootstrap-3 navigation

【解决方案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>

【讨论】：

【解决方案2】：

您需要一个 javascript 代码来向按下的链接添加/删除活动类.. 像这样：

$("a").click(function() {  
  //remove all active class from a elements
  $(this).addClass("active");      //add the class to the clicked element
});

类似的功能在这里：Add and remove a class on click using jQuery?

【讨论】：