Vermeersch Wouter Vermeersch Wouter - 2 months ago 10
HTML Question

Active class nav item based on retrieved url portion

I would like to add a css class (.active) on the appropriate navigation link.

My navigation:



<nav>
<ul>
<a href="index.php"><li id="Thuispagina">Thuispagina</li></a>
<a href="../airsoft-nieuws"><li id="Nieuws">Nieuws</li></a>
<a href="../airsoft-evenementen"><li id="Skirms">Skirms</li></a>
<a href="../airsoft-reserveren"><li id="Reservatie">Reservatie</li></a>
<a href="../airsoft-fotogalerij"><li id="Fotogalerij">Fotogalerij</li></a>
<a href="../airsoft-contact"><li id="Contact">Contact</li></a>
<a href="../airsoft-forum"><li id="Forum">Forum</li></a>
</ul>
</nav>





If I would be on one of the following pages: domain.com/airsoft-contact/index.php, domain.com/airsoft-contact/edit.php or domain.com/airsoft-contact/delete.php it should add the active class to the li item with id Contact

If I would be on one of the following pages: domain.com/airsoft-fotogalerij/index.php, domain.com/airsoft-fotogalerij/edit.php or domain.com/airsoft-fotogalerij/delete.php it should add the active class to the li item with id Fotogalerij

On the other hand there is one exception: the index.php page is not in any submap so the logic should make an exception there.

Answer Source

Well the better or simple way is using jquery but u can do it with php too using a condition example class="<?php if ($_SERVER['PHP_SELF']=="ur script name"){ echo "active";}?>" or u can use ternary operator for better views so this is a way, u can find others