Question

I’m using the jQuery Magic Line plugin and want to make the line appear under the current page in the menu. The menu looks like this:

    <ul class="group" id="example-one">
        <li class="current_page_item"><a href="index.php" >Home</a></li>
        <li><a href="about.php" >About</a></li>
        <li><a href="services.php" >Services</a></li>
        <li><a href="clients.php" >Clients</a></li>
        <li><a href="quoterequest.php" >Request a Quote</a></li>
        <li><a href="contact.php" >Contact</a></li>
    </ul>

I’ve been trying to modify the top answer from this thread but haven’t gotten far.

Answer 1

You can use window.location.pathname. If pages are on the root directory, try the following:

var loc = window.location.pathname.split('/')[1];
$('.group a[href='+ loc +']').parent().addClass('current_page_item')

However you can use PHP for doing this.