jQuery: add class and remove class to the list item. Change color of selected navigation menu

Scenario:

I have a navigation menu like this. Note: Link is child of list item. I wanted to change the background of the selected list item and remove the background color of unselected list item.

Solution that works

When we’re creating a navigation menu for a website, it’s always good to make it so the visitors or user on the website knows on which page or part of the site he is on. This can be accomplished by adding an “active class” or “current class” to the menu item that links to the page on which the visitor or user is.

To do this, we’ll create a css navigation menu. With a few links in it just for demonstration. Of course you can add as many as you want.

<menu id="nav">
    <ul>
        <li><a href="active.html">Home</a></li>
        <li><a href="active1.html">Contact</a></li>
        <li><a href="active2.html">About</a></li>
        <li><a href="active3.html">Portfolio</a></li>
    </ul>
</menu>

Then we add some style to it to make it look like an actual navigation menu.

#nav {
    margin:200px auto;
    width:430px;
    }

#nav ul {
    list-style:none;
    background-color:#64abfb;
    }

#nav ul li {
    display:inline-block;
    line-height:44px;
    }

#nav ul li a {
    margin:10px;
    color:#FFF;
    padding:4px;
    font-size:20px;
    text-decoration:none;
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
    }

After we are done we should have something like this:

active1

Now, you see a class named #nav ul li .active this is not yet added to any of the navigation items. To add it, we need to add some jQuery to our project, that will check the page URL that the user or visitor is viewing, and compares with the one on the menu item. If they mach, it’ll add the .active class to that menu item.

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav ul li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })
});

If you don’t have the jQuery library added to your project yet, this won’t work. So to include the library to your project, simply add the following line right before the end of your html tag ( </html> )

And after you are all done with this, your navigation should work properly.

active2

Or, if u want to do it by plain javascript, you can do that too. Here’s how.

First you got to add a #nav ID to your <nav> element. Then, use this code to add the active class to the li a element.

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}

window.onload = setActive;

Solution 2

index.html

$(document).ready(function () {
// $(“nav ul li a”).click(function () {
// alert(“internal click”);
// });
changeMenuColor();
});

<nav>
<ul>
<li><a href=”#”>Intro</a></li>
<li><a href=”#”>Size</a></li>
<li><a href=”#”>Play</a></li>
<li><a href=”#”>Food</a></li>
</ul>

</nav>

I tried to add a class .active into the list item using jQuery but it was not working

style.css
.active
{
background-color: #480048;
}

javascript.js
///
function changeMenuColor()
{
$(“nav li a”).click(function () {
$(this).parent().addClass(“active”);
$(this).parent().siblings().removeClass(“active”);
});
}

Solution:
Basically, using .active class changing the background-color of list item does not work. So I changed the css class name from .active to “nav li.active a” so using the same javascript it will add the .active class into the selected list item. Now if the list item has .active class then css will change the background color of the child of that list item .
nav li.active a
{
background-color: #480048;
}

Solution2:

With Reference to your link (classes and id) :

HTML

<li class="menu-item">
    <a href="#">About</a>
    <a href="#">Home</a>
</li>

CSS

 .menu-item{
        list-style:none;
    } 
    .menu-item a{
        padding:20px;
        padding-bottom:10px;
        border:1px solid #1B3E70;
        color:#1B3E70;
        text-decoration:none;
    }.menu-item a:hover{
            background-color:#1B3E70;
        color:white;
    }
    .menu-item .active{
         background-color:#1B3E70;
         color:white;

    }

Jquery

    $('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s