Jquery - Style the other li element by cliking li

Question

How to add or remove css for other li element.

how can i change the back ground color for li by Click the li tag.

change the Back ground color for the particular (clicked li ) tag other change to gray - Change need to taken inside the particular UL not all UL tag.

Note : ul class all have to keep the same name

    <div id ="divid">
<div>
     <ul class="togle" data-id="1">
      <li class="myview active> one <li>
      <li class="myview > two <li>
      <li class="myview > three <li>
     <ul>
    </div>
    <div>
     <ul class="togle" data-id="2">
      <li class="myview > one <li>
      <li class="myview > two <li>
      <li class="myview active> three <li>
    <ul>
    </div>
    ....
    .....
    .....
</div>

like have more..

JS :

var element = $('#divid');
element.on('click', '.togle', function(e) {
        //e.preventDefault();
        console.log("========");    

       $('#divid .togle li').removeClass('active');
        $(this).toggleClass('active');
    });

css:

.myview {
background-color: #eee;
}
.myview .active {
background-color: #FF0000;
}

Answer 1

JS:

$('.togle li').click(function(){
  $(this).parent('ul').find('li').removeClass('active');
  $(this).addClass('active');
});

CSS:

.togle li{
   background-color: #eeeeee;
}
.togle li.active{
   background-color: #FF0000;
}

Answer 2

As others have stated, you need to use siblings() to target only the items inside the current ul .

Also, your CSS is a bit off and won't trigger the highlight you expect. You should be using the CSS rule:

.myview.active

Instead you have:

.myview .active

That extra space is important, when you write it without the space it means you are targeting an element with both of those classes. With the space it means you are targeting an child element with class active where the parent is of class myview .

There's a running example below that should work as expected.

 $(".togle .myview").click(function() { var self = $(this); self.siblings("li.myview").removeClass("active"); self.addClass("active"); }); 

 .myview { background-color: #eee; } .myview.active { background-color: #FF0000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="togle" data-id="1"> <li class="myview active"> one </li> <li class="myview"> two </li> <li class="myview"> three </li> </ul> <ul class="togle" data-id="2"> <li class="myview"> one </li> <li class="myview"> two </li> <li class="myview active"> three </li> </ul> 

Answer 3

You could do something like:

$(".myview").click(function(){
    $(".togle").find(".active").removeClass("active");
    $(this).addClass('active');
})

Answer 4

If I understood your needs here is a JSFiddle , using $(this) you can access the clicked element properties.

The toggleClass is a useful Jquery method to add/remove a CSS class without knowing if the element has it or not.

HTML:

<div>
    <ul class="togle" data-id="1">
        <li class="myview active"> one </li>
        <li class=" myview">two</li>
        <li class="myview" > three </li>
    </ul>
</div>
<div>
   <ul class=" togle " data-id="2 ">
        <li class="myview">one</li>
        <li class="myview" > two </li>
        <li class="myview active">three</li>
   </ul>
</div>

JS:

$('.myview').click(function (e) {
    $(this).toggleClass('active');
});

Answer 5

Use the following click event to remove all active classes and then add the active class only to the clicked.

$('.myview').click(function () {
    $('.active').removeClass('active');
    $(this).addClass('active');
})

fiddle