Unable to add css to an li element on clicking the li tag

Question

This is the HTML Part-

 <div id="sidebar" role="navigation">

                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="#">My Orders</a></li>
                        <li><a href="#">My Store</a></li>
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Settings</a></li>

                    </ul>

                </div>

CSS:

/* Sidebar navigation */
    .nav-sidebar {
        background-color: #f5f5f5;
        margin-right: -15px;
        margin-bottom: 20px;
        margin-left: -15px;
    }
    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }
    .nav-sidebar > .active > a {
        color: #fff;
        background-color: #c52d2f;
    }

JS Code:

 $(document).ready(function() {

    $('#sidebar').on('click', 'li' function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

Checkout the demo http://jsfiddle.net/tu4tsa4n/1/ Whenever i click on an li tag , all the other tags should remove 'active' tag and the clicked 'li' tag should become 'red' or activated. Currently when you click on the tag it becomes highlighted and not red. How can the desired functionality be achieved?

Answer 1

There are 3 problems in your fiddle:

1. There is a syntax error, missing , between the selector and handler.

   $('#sidebar').on('click', 'li' function() {
                           // ---^
   

2. You haven't loaded jQuery. You can load it from the left panel.

3. When the class is added, bootstrap :focus selector overrides your selector:

   .nav>li>a:hover, .nav>li>a:focus {
       text-decoration: none;
       background-color: #eee;
   }
   

   You should use a more specific selector. Something like .nav > li.active > a.

http://jsfiddle.net/u2tzrpf2/

Answer 2

You should use this, and forgot to add JQuery on the JSFidlle:

 $(document).ready(function() {
    $('#sidebar .nav li').on('click', function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

http://jsfiddle.net/qs337y9e/1/

EDIT: I also changed the css to :.nav.nav-sidebar > li.active > a as @Vohuman suggested

Answer 3

When there is a <a>, why not use it, it is designed for clicking,

You an do this allot easier:

$(document).ready(function() {
$('#sidebar li a').on('click', function() {
     $('#sidebar li a').parent().removeClass('active');
     $(this).parent().addClass('active');
    });
});

.nav-sidebar {
        background-color: #f5f5f5;
        margin-right: -15px;
        margin-bottom: 20px;
        margin-left: -15px;
    }
    .nav-sidebar a {
        padding-right: 20px;
        padding-left: 20px;
    }
    .nav-sidebar .active a {
        color: #fff;
        background-color: #c52d2f;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar" role="navigation">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">My Orders</a></li>
            <li><a href="#">My Store</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Settings</a></li>
          </ul>
        </div>

Answer 4

1) I think you can simplify the selector

    $('#sidebar li').on('click', function(){
        $(this).siblings().removeClass("active"); //better than 'find'
        $(this).addClass('active');            
    });

2) @Vohuman's mention of focus is your 'real' problem fixed with:

    .nav-sidebar > .active, .nav-sidebar > .active :focus  {
        color: #fff;
        background-color: #c52d2f;
    }

http://jsfiddle.net/f9ccqq7L/

Answer 5

You forgot a comma in this line

$('#sidebar').on('click', 'li' function(){

It should be

$('#sidebar').on('click', 'li', function(){

You forgot to specify the class you want to remove in this line

$(this).closest('ul').find('.active').removeClass();

Here is the correction:

$(this).closest('ul').find('.active').removeClass("active");

Then you have to add a little css because of boostrap.

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:focus{
    color: #fff;
    background-color: #c52d2f;
}