I am facing a problem in which i want to add class onclick means the clicked should add class. see my image

i am doing this by jquery as:

$(function() {

$('.box li').click(function(){
    $('.box li').removeClass('submenu-active');

    $(this).addClass('submenu-active');

});

});

and my css is:

.aside ul li.submenu-active a {background-color:#df0000; color:#fff;}

and my submenu code is:

<ul class="box">
                <li class="submenu-active"><a href="create_financial_year.php">Create Financial Year</a></li>
                <li ><a href="select_financial_year.php">Select Financial Year</a></li>
                <li><a href="account_master.php">Account Master</a></li>
                <li><a href="bank_account_master.php">Bank Account Master</a></li> <!-- Active -->                  
                <li><a href="subscription_master.php">Subscription Master</a></li>
                <li><a href="subscription_fee_master.php">Subscription Fee Master</a></li>
                <li><a href="member_master.php">Member Master</a></li>                
                <li><a href="membership_suspension.php">Membership Suspension</a></li>
            </ul>

i realy Have spent so many hour but did not sort out this...by this it is working but when i leave click onmouse then the added class got remove... any suggestion would be highly responsive...thanxxx

I am facing a problem in which i want to add class onclick means the clicked should add class. see my image

i am doing this by jquery as:

$(function() {

$('.box li').click(function(){
    $('.box li').removeClass('submenu-active');

    $(this).addClass('submenu-active');

});

});

and my css is:

.aside ul li.submenu-active a {background-color:#df0000; color:#fff;}

and my submenu code is:

<ul class="box">
                <li class="submenu-active"><a href="create_financial_year.php">Create Financial Year</a></li>
                <li ><a href="select_financial_year.php">Select Financial Year</a></li>
                <li><a href="account_master.php">Account Master</a></li>
                <li><a href="bank_account_master.php">Bank Account Master</a></li> <!-- Active -->                  
                <li><a href="subscription_master.php">Subscription Master</a></li>
                <li><a href="subscription_fee_master.php">Subscription Fee Master</a></li>
                <li><a href="member_master.php">Member Master</a></li>                
                <li><a href="membership_suspension.php">Membership Suspension</a></li>
            </ul>

i realy Have spent so many hour but did not sort out this...by this it is working but when i leave click onmouse then the added class got remove... any suggestion would be highly responsive...thanxxx

• javascript
• jquery
• css

• the part in bold is not really clear... could you rephrase the problem you're facing? – Fabrizio Calderan Commented Jul 18, 2013 at 10:18
• i want that when i click list item then background color of list item should be red..... – Amrish Commented Jul 18, 2013 at 10:20

3 Answers 3

Use that instead:

DEMO

$(function () {

    $('.box li a').click(function (e) {
        e.preventDefault();
        $(this).closest('li').addClass('submenu-active').siblings().removeClass('submenu-active');
        //to load new content using ajax
        //you could wish to show user, some content is loading
        $('#myContainer').html('<img src="loading.gif>').load(this.href);
    });

});

Corresponding CSS for your jsfiddle:

ul.box li.submenu-active {
    background-color:#df0000;
    color:#fff;
}

Problem is then, anchor tags won't redirect to corresponding page, but i don't know what you are looking for exactly.

Change .aside ul li.submenu-active a to li.submenu-active a

See demo.

function toggleColor() {
  var button = document.querySelector('a');
  button.classList.toggle('blue');
}
//if you only want to add a class instead of toggling one write the code below

function changeColor() {
  var button = document.querySelector('a');
  button.classList.add('blue');
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

a {
  padding: 15px 30px;
  color: #fff;
  background: #ff0fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.4s;
}

a.blue {
  background: #0f57ff;
  transition: background-color 0.4s;
}

<a onclick="toggleColor();">Click To Toggle Colors</a>