I am trying to add class in anchor tag dynamically by using Javascript or Jquery. I have found many solution but not what I'm looking for.
I want to use PHP's dynamic header and footer. for that i want to add "active" class in current page that i or user will use.
<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>
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");
}
});
<?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>
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>
activeclass in corresponding<a>.