Question

Considering the case, that I have the following menu:

<ul>
<li><a href="index.php">Index</a></li>
<li><a href="about.php">About</a></li>
<li><a href="test.php">Test</a><li>
</ul

And the menu is located in header.php . For each page (Index, About, Test), I have index.php, about.php and test.php, and all these files include the header.php !

What I need is adding a class to the li when we are on different pages. So if we are on the about.php, the class should be added on the second li.

Is there any way to do with jQuery, or what are the ways to handle this problem?

Answer 1

I use something like this on one of my static HTML websites, which you can adapt:

<div id="navigation">

                <?php $currentPath = $_SERVER['REQUEST_URI']; ?>
                <?php $currentClass = ' class="current"'; ?>

                <ul id="nav">
                    <li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>><a href="/">Home</a></li>
                    <li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li>
                    <li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li>
                    <li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>><a href="/technology/">Technology</a></li>
                    <li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>><a href="/contact/">Contact</a></li>
                </ul>

            </div>

Enjoy!