How To Assign A Class "active" To The Li Element Based On Current Url And Click Event Using Jquery Or Javascript

I am trying to create a menu where a class 'active' is assigned to the page whenever it's selected and loaded. Right now it is applied only to the index page by default. My menu sn

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 lis 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
}
?>