How to dynamically add a class to li item and change its background color using javascript and css

Question

Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. the thing is once it click on the link page will be redirected and refresh. please can me suggest a solution for to get this done?

<div id="main-menu">  
    <ul id="main-menu-list">      
      <li id="menu-home"><a href="main/home">Home</a></li>    
      <li id="menu-profile"><a href="main/profile">My Profile</a></li>
      <li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
      <li id="menu-search"><a href="main/search">Search</a></li> 
    </ul>
</div>

what i did for this :

Java Script :

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )

  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $("#main-menu li").click(make_button_active);
  }  
)

CSS :

#main-menu-list li.active {
  background: #0040FF;
}

Answer 1

It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:

/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
    // stop the link from firing
    e.preventDefault();
    e.stopPropagation();
    // change the list item's background to green
    $(this).closest('li').addClass('myClassName').css('background-color', 'green');

    // do anything else, e.g. load in pages via ajax...
});

You could use CSS to apply the green background color, instead of jQuery:

.myClassName { background-color: green; }

This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:

var currentPage = window.location.pathname;

$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');

EDIT:

Your amended Javascript code can be simplified to the following:

$('#main-menu li').on('click', 'a', function (e) {
    e.preventDefault();
    e.stopPropagation();
    // only do the following if the clicked link isn't already active
    if(!$(this).closest('li').hasClass('active')) {
        $(this).closest('ul').find('.active').removeClass('active');
        $(this).closest('li').addClass('active');

        // load in your content via ajax, etc.
    }
});

JSFiddle example

Answer 2

For each page you can add a class to the current list item that has "where the user is"..

CSS:

.selectedItem{
     background-color: orange;//whatever color your want for the selected tab..
 }

Then for each of your pages,

say you're in Dashboard.html

your menu code will look like:

<div id="main-menu">  
 <ul id="main-menu-list">      
    <li id="menu-home"><a href="main/home">Home</a></li>    
    <li id="menu-profile"><a href="main/profile">My Profile</a></li>
    <li id="menu-dashboard" class="selectedItem"><a href="main/db">My Dashboard</a></li>
   <li id="menu-search"><a href="main/search">Search</a></li> 
 </ul>
</div>

in profile.html:

<div id="main-menu">  
 <ul id="main-menu-list">      
    <li id="menu-home"><a href="main/home">Home</a></li>    
    <li id="menu-profile" class="selectedItem"><a href="main/profile">My Profile</a></li>
    <li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
   <li id="menu-search"><a href="main/search">Search</a></li> 
 </ul>
</div>

and so on..

Answer 3

You need to change the background color when the document is loaded (ie in document.ready).

Then you need a mechanism to connect the currently loaded page to one of your list items.

$(document).ready(function(){
    //get the url from the current location or in some other way that suits your solution
    //perhaps use window.location.pathname
    var moduleId = "dashboard" // hardcoded to dashboard to make the point :);

    $("#menu-"+moduleId).css("background-color", "#ccc");
});

http://jsfiddle.net/9JaVn/1/