How to have the class="selected" depending on what the current page/url is

css, html, javascript, php

Solution

If you're looking for a non-javascript / php approach...

First you need to determine which nav-link should be set as active and then add the selected class. The code would look something like this

HTML within php file

Call a php function inline within the hyperlink `<a>` markup passing in the links destination request uri

<ul>
    <li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
    <li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
    <li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
    <li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
    <li><a href="#">Support</a>
        <ul>
            <li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
            <li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
         </ul>
    </li>
</ul>

PHP function

The php function simply needs to compare the passed in request uri and if it matches the current page being rendered output the selected class

<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>

Problem

This is my first post so forgive as I am just new in the world of web development. Normally, when I try to make a website, I create a file called header.html and footer.html so that I only change data once in all of the pages rather than having multiple same headers on many html files. And include them all in a php file together with the content and the php codes that comes per page. Now my problem is because I only have 1 header, the css is designed in a way that whatever the current menu/tab is, it will be marked as "selected" so that its obvious to the user what page they are currently in. My question is how do I solve this problem: 1.) To have the `class="selected"` depending on what the current page/url is. ``` <!--Menu Starts--> <div class="menu"> <div id="smoothmenu" class="ddsmoothmenu"> <ul> <li><a href="index.php" class="selected">Home</a></li> <li><a href="about.php">About</a> </li> <li><a href="services.php">Services</a> </li> <li><a href="features.php">Features</a></li> <li><a href="#">Support</a> <ul> <li><a href="support1.php">Support 1</a></li> <li><a href="support2.php">Support 2</a></li> </ul> </li> </ul> </div> </div> <!-- Menu Ends--!> ``` Thank You :)

Original source