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 stackoverflow.com/questions/10593591/…

Aman Rawat
– Aman Rawat

2016-04-29 05:40:38 +00:00
Commented Apr 29, 2016 at 5:40 — Aman Rawat
– Aman Rawat, Commented Apr 29, 2016 at 5:40

shashik493 · Accepted Answer · 2016-04-29 05:50:43Z

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, 2016 at 5:50

shashik493

8201 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PatriceD Over a year ago

Or in the head of the pages

shashik493 Over a year ago

you add below the code or bottom of the page .Code runs once the page is loaded . Because we using document.ready function.

etee · Accepted Answer · 2016-04-29 05:39:36Z

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, 2016 at 5:39

etee

866 bronze badges

2 Comments

PatriceD Over a year ago

Should I add this to every li tag?

etee Over a year ago

As per my solution yes, you have to add this to every li tag

Collectives™ on Stack Overflow

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 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related