How to add an active class in anchor tag nested in ul li

Question

I have tied in situation where i want to add an active class on click of anchor tag which is nested in ul li and automatically on left siblings active class removed out.

Similarly in below i have another div in which 4 div are present. Means when 1st anchor tag is clicked then in below 1st div become active & vice versa for others. I have tried a code below but it add active class to all anchor tags. I beginner in jquery.

 $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); console.log('index = ', index); if (index == 3) { // console.log('index is 3'); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); $('.map-control-cover').hide() $('.checkout-control-cover').show(); } else { // console.log('i am here'); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); $('.map-control-cover').show() $('.checkout-control-cover').hide(); } }); }); 

 .active { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container"> <div class="bhoechie-tab-menu"> <div class="list-group"> <ul class="tab-manu"> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center active"> <span class="glyphicon glyphicon-map-marker"></span> <br>Location </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center"> <span class="glyphicon glyphicon-pencil"></span> <br>Labels </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center"> <span class="glyphicon glyphicon-edit"></span> <br>Customize </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center "> <span class="glyphicon glyphicon-shopping-cart"></span> <br>Cart </a> </li> </ul> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab"> <div class="bhoechie-tab-content active"> <!-- content 1--> </div> <div class="bhoechie-tab-content"> <!-- content 2--> </div> <div class="bhoechie-tab-content"> <!-- content 3--> </div> <div class="bhoechie-tab-content"> <!-- content 4--> </div> </div> 

I have debug in console but it show same index no on all anchor tag.

Answer 1

Since the anchors are inside list items, you need to get the index of the parent, not the anchor, and also process the siblings of the parent.

And your selector for the anchors is not correct. The anchors are not direct children of div.list-group .

 $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group a").click(function(e) { e.preventDefault(); var li = $(this).parent(); li.siblings().find('a.active').removeClass("active"); $(this).addClass("active"); var index = li.index(); if (index == 3) { // console.log('index is 3'); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); $('.map-control-cover').hide() $('.checkout-control-cover').show(); } else { // console.log('i am here'); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); $('.map-control-cover').show() $('.checkout-control-cover').hide(); } }); }); 

 .active { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container"> <div class="bhoechie-tab-menu"> <div class="list-group"> <ul class="tab-manu"> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center active"> <span class="glyphicon glyphicon-map-marker"></span> <br>Location </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center"> <span class="glyphicon glyphicon-pencil"></span> <br>Labels </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center"> <span class="glyphicon glyphicon-edit"></span> <br>Customize </a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space"> <a href="#" class="list-group-item text-center "> <span class="glyphicon glyphicon-shopping-cart"></span> <br>Cart </a> </li> </ul> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab"> <div class="bhoechie-tab-content active"> <!-- content 1--> </div> <div class="bhoechie-tab-content"> <!-- content 2--> </div> <div class="bhoechie-tab-content"> <!-- content 3--> </div> <div class="bhoechie-tab-content"> <!-- content 4--> </div> </div> 

Answer 2

Since your anchor tags are not siblings, but wrapped around li tag you are not getting the desired result.

So, you can either restructure you code to make them siblings, or you can refer to the target's parent with $(this).parent() , and then use .find('.active') to find any elements with active class and keep on using your same code.