'Add Class in html Dynamically in PHP

I am trying to add class in anchor tag dynamically by using Java script or Jquery. I have find many solution but not what i am looking. I am want to use PHP dynamic header and footer. for that i want to add "active" class in current page that i or user will use.

Please help me out.

Thank in advance. 

<ul class="nav pull-right">
    <li>
        <a href="index.php"><i class="icon-home"></i><br />Home</a>
    </li>
    <li>
        <a href="portfolio.html"><i class="icon-camera"></i><br />Portfolio</a>
    </li>
</ul>
javascriptphpjqueryhtml


Solution 1:[1]

<?php
$thisPage = "home";

?>
<html>
<head>
 ...
 ...
<body>
<ul class="nav pull-right">
<li <?php if($thisPage == "home") echo 'class="active"'; ?>>
    <a href="index.php"><i class="icon-home"></i><br />Home</a>
</li>
<li>
    <a href="portfolio.html"><i class="icon-camera"></i><br />Portfolio</a>
</li>

Solution 2:[2]

Try something lie this

<?php 

$urlArr = explode("/", $_SERVER['REQUEST_URI']);

$active_class = array_pop($urlArr); ?>


<ul class="nav pull-right">
    <li class="<?php echo ($active_class == "index.php") ? "active" : ""; ?>">
        <a href="index.php"><i class="icon-home"></i><br />Home</a>
    </li>
    <li class="<?php echo ($active_class == "portfolio.html") ? "active" : ""; ?>">
        <a href="portfolio.html"><i class="icon-camera"></i><br />Portfolio</a>
    </li>
</ul>

Solution 3:[3]

If you want client-side to handle such things, following snippet should give you the idea how to do it. And you should notice that your URL of index.php should have been shown in the URL. As it's mostly overridden by htaccess.

Following example is about visiting an URL of http://example.org/portfolio.html

//First, get the current URL
var url = window.location.href;  //output: http://example.org/portfolio.html

//Then split them to array by '/'
var arrurl = url.split('/');  //output: Array [ "http:", "", "example.org", "portfolio.html" ]

//Get last portion of the uri
var lasturi = arrurl[arrurl.length-1];  //output: portfolio.html

//Split the last segment by '.'
var arruri = lasturi.split('.');  //output: Array [ "portfolio", "html" ]

//Get the first value of previous array
var page = arruri[0];  //output: portfolio

Now, iterate to the navbar. I put an ID to it for better selector. <ul id="mynavbar" class="nav pull-right">

//Iterate to navbar
$('#mynavbar a').each(function () {
    //Get attribute href value
    var href = $(this).attr("href");

    //Split by '.' to array
    var arrhref = href.split('.');

    //Get the first portion
    var hrefportion = arrhref[0];

    //Now, we should add class 'active' to the href (also parent li element)
    //if the 'hrefportion' is equal to 'page' in this case 'portfolio'
    if (hrefportion == page) {
        //Add 'active class to the anchor
        $(this).addClass("active");

        //also its parent li element
        var li = $(this).parent();
        li.addClass("active");
    }
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hesonline
Solution 2 Shrikant Mavlankar
Solution 3 Chay22

Related Questions