So I have searched SO for an hour trying to find the answer, and also tried various methods, including this
I am trying to include my pages, along with the navigation. But on the correct page, I need the list-item to have a class of active
. The navigation is in header.php and currently looks like this:
<nav>
<ul>
<li class="active"> <a href="/">Home</a> </li>
<li> <a href="#">Apps</a> </li>
<li> <a href="#">Forums</a> </li>
</ul>
</nav>
First, I have no idea if JS(jQuery) would be better, or if PHP was to be better. Both wouldn't matter if it works.
Also I am a bit new with PHP and trying to learn.
What would be the easiest (hopefully) method to use? So I don't have to change a lot of code just to give a nav class="active"
Asumming you have a $page
variable (which contains the name of the page you are currently on):
<nav>
<ul>
<li class="<?php echo ($page == "home" ? "active" : "")?>"> <a href="/">Home</a> </li>
<li class="<?php echo ($page == "apps" ? "active" : "")?>"> <a href="#">Apps</a> </li>
<li class="<?php echo ($page == "forums" ? "active" : "")?>"> <a href="#">Forums</a> </li>
</ul>
</nav>
Here is a simple way where you do not need to add any other variable
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/index.php" ? "active" : "");?>">
<a href="index.php">Start</a>
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/about.php" ? "active" : "");?>">
<a href="about.php">About</a>
</li>
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/practices.php" ? "active" : "");?>">
<a href="practices.php">Practices</a>
</li>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With