I am using php includes to build a mutipage website. Using jquery, how would I add a class "active" to each webpage so it highlights

Question

I am using php includes to build a mutipage website. Using jquery, how would I add a class "active" to each webpage the menu highlight whatever webpage the user is currently looking at.

This is my nav html:

<nav class="menu">
    <ul class="nav">
        <li><?php if ($thisPage=="Home") 
        echo " id=\"currentpage\""; ?><a href="http://urcsc170.org/pdouge/project3xc/index.php">Home</a></li>
        <li><?php if ($thisPage=="Jeff Bezos") 
        echo " id=\"currentpage\""; ?><a href="http://urcsc170.org/pdouge/project3xc/jeff-bezos.php">Jeff Bezos</a></li>
        <li><?php if ($thisPage=="Larry Page") 
        echo " id=\"currentpage\""; ?><a href="http://urcsc170.org/pdouge/project3xc/larry-page.php">Larry Page</a></li>
        <li><?php if ($thisPage=="Edward Snowden") 
        echo " id=\"currentpage\""; ?><a href="http://urcsc170.org/pdouge/project3xc/edward-snowden.php">Edward Snowden</a></li>
        <li><?php if ($thisPage=="Elon Musk") 
        echo " id=\"currentpage\""; ?><a href="http://urcsc170.org/pdouge/project3xc/elon-musk.php">Elon Musk</a></li>
    </ul>
</nav>

This will help http://stackoverflow.com/questions/10593591/jquery-active-class-to-menu-item-based-on-current-url — Aman Rawat, Apr 29 '16 at 05:40

score 1 · Accepted Answer · answered Apr 29 '16 at 05:50

1

Below activeurl gets current url , if it matches your active class assign automatically.

    /*active menu class*/  
 <ul class="menu">            
                <li><a  href="demo.com">home</a>
                </li>      
                <li><a href="xyz.com/category/test">Editorial</a></li>
</ul>
         $(document).ready(function(){
             var activeurl = window.location;
             $('a[href="' + activeurl + '"]').parent('li').addClass('active'); 
         });

answered Apr 29 '16 at 05:50

shashik493

790
1
10
12

Or in the head of the pages – PatriceD Apr 29 '16 at 16:25
you add below the code or bottom of the page .Code runs once the page is loaded . Because we using document.ready function. – shashik493 Apr 29 '16 at 16:43

score 0 · Answer 2 · answered Apr 29 '16 at 05:39

0

Add this to the li tag

class="<?php if ($thisPage=="Home") print $active_class; ?>"

where $active_class = active initialize this somewhere in the page

answered Apr 29 '16 at 05:39

etee

86
6

Should I add this to every li tag? – PatriceD Apr 29 '16 at 16:04
As per my solution yes, you have to add this to every li tag – etee May 02 '16 at 06:42

I am using php includes to build a mutipage website. Using jquery, how would I add a class "active" to each webpage so it highlights

2 Answers2