Question

我正在尝试在导航栏上显示active标记。它显示在所有选项卡上，除了下拉列表之外。我无法弄清楚为什么它没有在这个特定按钮上调用类。我显然把它放在了错误的地方。对此问题的任何帮助将不胜感激！

代码:(第一个是CORRECT - 即 - 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

你需要一个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?

Answer 2

如果我理解正确，您需要检查网址。（在我的演示中，我将其设置为特定的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 个答案: