How To Assign A Class "active" To The Li Element Based On Current Url And Click Event Using Jquery Or Javascript
Solution 1:
Try this code. Its working at my end.
<script>jQuery(document).ready(function() {
jQuery(".nav.navbar-nav li").click(function(){
jQuery(".nav.navbar-nav li").removeClass('active');
jQuery(this).addClass('active');
})
var loc = window.location.href;
jQuery(".nav.navbar-nav li").removeClass('active');
jQuery(".nav.navbar-nav li a").each(function() {
if (loc.indexOf(jQuery(this).attr("href")) != -1) {
jQuery(this).closest('li').addClass("active");
}
});
});
</script><ulclass="nav navbar-nav"><liclass="active"><ahref="http://localhost/wp/index.php">Main</a></li><li><ahref="http://localhost/wp/news">News</a></li><li><ahref="http://localhost/wp/contacts">Contacts</a></li></ul>
Solution 2:
i assume if you are using php ur page would be like this. just define a $active variable in each page.
<?php//Main.php$active = "Main";
?><?php//news.php$active = "News";
?><?php//Contacts.php$active = "Contacts";
?>
Then your html would be like this.
<ulclass="nav navbar-nav"><liclass="<?phpecho$active=='Main'? 'active' : ''; ?>"><ahref="http://localhost/wp/index.php">Main</a></li><liclass="<?phpecho$active=='News'? 'active' : ''; ?>"><ahref="http://localhost/wp/news">News</a></li><liclass="<?phpecho$active=='Contacts'? 'active' : ''; ?>"><ahref="http://localhost/wp/contacts">Contacts</a></li></ul>
Solution 3:
I think this will be better:-
$(".navbar-nav").children("a").click(function(){
$(".navbar-nav").children("li").removeClass("active");
$(this).parent("li").addClass("active");
})
Solution 4:
i hope this would help you if you can edit your theme.
$slug = basename(get_permalink());
<ulclass="nav navbar-nav"><liclass="<?phpecho$slug =='Main_page_slug'? 'active' : ''; ?>"><ahref="http://localhost/wp/index.php">Main</a></li><liclass="<?phpecho$slug =='newpageslug'? 'active' : ''; ?>"><ahref="http://localhost/wp/news">News</a></li><liclass="<?phpecho$slug =='congtactPageslug'? 'active' : ''; ?>"><ahref="http://localhost/wp/contacts">Contacts</a></li></ul>
there might be some other way to get current page url or title or id, please check here Link
Solution 5:
You can do it in PHP.
Steps:
1) Create a multi-dimensional array of menus.
2) Key is the link and value is the text.
3) Get the current page URL.
4) Get the last segment of the url using
basename()
.5) That will be your current page variable. If its blank, assign it to home page.
6) Loop over
menus
array.7) Display menu
li
s in loop.8) If current loop items is equal to current page, add class
active
else, add no class.
<?phpfunctioncurPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return$pageURL;
}
$menus = array();
$menus['main'] = 'index.php';
$menus['news'] = 'News';
$menus['contacts'] = 'Contacts';
$currentURL = curPageURL();// Get Current url here.$currentPage = basename($currentURL);
$currentPage = empty($currentPage) ? 'main' : $currentPage;
if (! empty($menus)) {
?><ulclass="nav navbar-nav"><?phpforeach ($menusas$lnk => $txt) {
$activeCls = ($lnk == $currentPage) ? 'active' : '';
?><liclass="<?phpecho$activeCls;?>"><ahref="http://localhost/wp/<?phpecho$lnk;?>"><?phpecho$txt;?></a></li><?php
}
?></ul><?php
}
?>
Post a Comment for "How To Assign A Class "active" To The Li Element Based On Current Url And Click Event Using Jquery Or Javascript"