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

Question

I have my menu in an include file called menu.php and I want to assign a class called 'active' to the <li> to the page that I am on. How can I do this in PHP or 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 --> 

Answer 1

You could just set a variable before the menu.php include that tells the include what to highlight:-

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

Then on the menu:-

<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>

Answer 2

This is the JavaScript code that you might be looking for.

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');
    }
}

Here on the line 1, that PHP code is used to return name of the requested page. You can also make it using JavaScript alone by the following:

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

So, you can make it all with the JavaScript itself.

Hope it helps!