Need add class to li
admin.tpl:
<ul class="nav nav-tabs">
<li><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
</ul>
if example.com/admin.php need
<li class="active"><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
example.com/admin.php?site=ban_add
<li><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li class="active"><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
end etc.. Please help!
Does not work
<li class="<?php if ($page=="admin.php") echo "active"?>">
try this JQUERY
first give the id
to your ul
<ul class="nav nav-tabs" id="nav_tabs">
then use jquery
$(document).ready(function(){
$('ul#nav_tabs li a').each(function(index, element) {
var li = $(element).attr('href');
$(element).parent().removeClass("active");
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
if(filename==li)
{
$(element).parent().addClass("active");
}
});
});
also you can use PHP as
<?php
$my_url = $_SERVER['REQUEST_URI'];
$page = substr($my_url, strrpos($my_url, '/') + 1)
?>
<ul class="nav nav-tabs" id="nav_tabs">
<li <?php if($page=="admin.php") echo 'class="active"'; ?>><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li <?php if($page=="admin.php?site=ban_add") echo 'class="active"'; ?>><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li <?php if($page=="admin.php?site=ban_add_online") echo 'class="active"'; ?>><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
</ul>
On click on link page will refresh then you can use php GET to get page name and set active class on li as below :
<?php
if (isset($_GET['site'])) {
switch ($_GET['site']) {
case 'ban_add':
$activeClass1 = 'active';
break;
case 'ban_add_online':
$activeClass2 = 'active';
break;
default:
$activeClass = 'active';
break;
}
}
?>
<li class="<?php echo $activeClass; ?>"><a href="admin.php" >{"_MENUINFO"|lang}</a></li>
<li class="<?php echo $activeClass1; ?>"><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li class="<?php echo $activeClass2; ?>"><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
In document ready of jquery write this code. whenever page loads get the url and add class active to corresponding li tag.
$(function(){
var pathName = location.pathname;
$('.nav-tabs a[href="' + pathName + '"]').closest('li').addClass('active');
});
I would generate the list dynamically server-side and add a class to the li
element that it's descendant a
's href
matches with the current URL. This also makes your markup tidy and more maintainable.
Using JavaScript you can use the .filter()
method:
$(function() {
$('.nav-tabs a').filter(function() {
return this.href === document.URL;
}).closest('li').addClass('active');
})