Home/ Questions/Q 6738575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:23:07+00:00

I have a little website with 5 nav sections. For avoid change the code

  • 0

I have a little website with 5 nav sections.

For avoid change the code on every page when I have to add one more sections, I use a php include on the nav section of every page.

Now I need to add class “selected” to the list item (li) depending the page visited. ¿How to do this? Because now the nav is unique.

This is the code

            <nav>
                <ul>
                    <li class="selected"><a href="index.php">Home</a></li>
                    <li><a href="biography.php">Bio</a></li>
                    <li><a href="photo.php">Photo</a></li>
                    <li><a href="work.php">Work</a></li>
                    <li class="last"><a href="contact.php">Contact</a></li>
                </ul>
                <div class="clear"></div>
            </nav>

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s the easy way to do it, pure CSS no need for any programming: Add an ID to your body and your links:

    <body id='home'>
    <nav>
        <ul>
            <li id='home-link'><a href="index.php">Home</a></li>
            <li id='bio-link'><a href="biography.php">Bio</a></li>
            <li id='photo-link'><a href="photo.php">Photo</a></li>
            <li id='work-link'><a href="work.php">Work</a></li>
            <li id='contact-link'class="last"><a href="contact.php">Contact</a></li>
        </ul>
        <div class="clear"></div>
    </nav>

    Now, you just style like this:

    #home #home-link, #bio #bio-link, #photo #photo-link, #work #work-link, #contact #contact-link{
    //however you would have styled .active
}
    • 0