如何将活动类添加到菜单项答案

【问题标题】：How to add active class to menu item如何将活动类添加到菜单项
【发布时间】：2017-02-15 17:03:06
【问题描述】：

我的菜单在一个名为 menu.php 的包含文件中，我想将一个名为“active”的类分配给我所在的页面<li>。如何在 PHP 或 JavaScript 中做到这一点？

<!-- navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.php">Home</a></li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
         aria-haspopup="true" aria-expanded="false">Insect Control 
      <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="insect-control.php">Insect Control</a></li>
      <li><a href="ant-cockroach-control.php">Ant & Cockroach Control</a></li>
      <li><a href="bed-bug-treatment.php">Bed Bug Treatments</a></li>
      <li><a href="fly-control.php">Fly Control</a></li>
      <li><a href="wasp-hornets-bee-control.php">Wasp, Hornet & Bee Control</a></li>
    </ul>
  </li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
         aria-haspopup="true" aria-expanded="false">Rodent & Vermin 
      <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="rodent-vermin.php">Rodent & Vermin</a></li>
      <li><a href="rats-mice-infestation.php">Rats & Mice Infestation</a></li>
      <li><a href="squirrel-control.php">Squirrel Control</a></li>
    </ul>
  <li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- end navigation -->

【问题讨论】：

jQuery - Add active class and remove active from other element on click的可能重复
通过 php，因为我认为页面会刷新
这个是@mickadoo 的副本吗？他在询问如何在页面加载时执行此操作，以便突出显示当前活动页面
How to add active class on click and remove active on click的可能重复

标签： javascript php twitter-bootstrap

【解决方案1】：

您可以在 menu.php 包含之前设置一个变量，告诉包含要突出显示的内容：-

$activepage = "squirrel-control";
require("menu.php");

然后在菜单上：-

<li <?=($activepage=="rodent-and-vermin")?'class="active"':''?>><a href="rodent-vermin.php">Rodent & Vermin</a></li>
<li <?=($activepage=="rats-mice-infestation")?'class="active"':''?>><a href="rats-mice-infestation.php">Rats & Mice Infestation</a></li>
<li <?=($activepage=="squirrel-control")?'class="active"':''?>><a href="squirrel-control.php">Squirrel Control</a></li>

【讨论】：

我喜欢这个。这安全吗？
没有什么比这更安全的了。
好的，这很好用。但是可以说我也希望父
也有 active 类我将如何添加它，因为它不是页面

【解决方案2】：

这是您可能正在寻找的 JavaScript 代码。

var requestURI = "<?= basename($_SERVER['REQUEST_URI']) ?>";
var navList = document.querySelectorAll("ul.nav li");

for(var i = 0; i < navList.length; i++) {
    var menuURL = navList[i].querySelector('a').href;
    menuURL = menuURL.substring(menuURL.lastIndexOf('/') + 1);
    if(requestURI == menuURL) {
        navList[i].classList.add('active');
    }
}

在第 1 行，PHP 代码用于返回所请求页面的名称。您也可以通过以下方式单独使用 JavaScript：

var requestURI = window.location.pathname;
requestURI = requestURI.substring(requestURI.lastIndexOf('/') + 1);

因此，您可以使用 JavaScript 本身完成这一切。

希望对你有帮助！

【讨论】：