CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5443928
user5443928

Reputation:

How to add and remove active class to anchor tag within li using Jquery/Javascript

I need one help. I have multiple li values I need to add active class when clicked any value and removed from others using Jquery/Javascript.I am explaining my code below.

<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    

</ul>

My active class is given below.

.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}

Here I need while user will click on one value that only will be remain active and other will not have the active class.Please help me.

Upvotes: 1

Views: 23157

Answers (11)

Sanket Shinde
Sanket Shinde

Reputation: 134

$('.abc').click(function () {
  $('.abc').removeClass('active');
  $(this).addClass('active');
});
.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}
<!DOCTYPE html>

<HTML>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <ul id="ulCategory">
        <li class="abc active"><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
        <li class="abc"><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>
        <li class="abc"><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>
      </ul>
    </div>
  </body>
</html>

Upvotes: 0

guradio
guradio

Reputation: 15555

$("#ulCategory a").click(function() {

  $(this).addClass("active")
  $("a").not(this).removeClass("active")
})
.active {
  text-align: left;
  color: #fff;
  background-color: #ffbb00;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
  <li><a href='#'>ABC</a></li>
  <li><a href='#'>ABF</a></li>
  <li><a href='#'>ABK</a></li>

</ul>

  1. Use addClass() and removeClass() with not()
  2. In href use #

Upvotes: 0

vinox
vinox

Reputation: 401

$(document).ready(function(){
    $('#ulCategory li a').click(function(){
    $('#ulCategory li a').removeClass("active")
        $(this).toggleClass("active");
    });
});
.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
<li><a>ABC</a></li> 
<li><a>ABF</a></li>    
<li><a>ABK</a></li>    
</ul>

Upvotes: 0

Gauri Bhosle
Gauri Bhosle

Reputation: 5473

Just add div to your "ul" tag and write onclick event on it.Try below code

//HTML   
 <div id="list_div">
      <ul id="ulCategory">
       <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
       <li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
      <li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    
     </ul>
    </div>


//JS
     $(document).on("click","#list_div a",function() {   
           $(this).parent().addClass('active').siblings().removeClass('active');
        });

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 1462

You can try something like this

  $('ul li a').click(function() {
      $(this).parent().siblings().children().removeClass( "active" );
      $(this).addClass( "active" ); 
    });


$('ul li a').click(function() {
  $(this).parent().siblings().children().removeClass( "active" );
  $(this).addClass( "active" ); 
});
.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick=''>ABC</li> 
<li><a href='javascript:void(0)' onclick=''>ABF</li>    
<li><a href='javascript:void(0)' onclick=''>ABK</li>    

</ul>

Upvotes: 0

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

You can use siblings method.

siblings method gets the siblings of each element in the set of matched elements, optionally filtered by a selector.

$("ul li").click(function() {
  $(this).addClass('active').andSelf().siblings().removeClass();
});
.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
  <li><a href="javascript:void(0)" class="subcategory">ABC</li> 
  <li><a href="javascript:void(0)" class="subcategory">ABF</li>    
  <li><a href="javascript:void(0)" class="subcategory">ABK</li>
</ul>

Upvotes: 0

prasanth
prasanth

Reputation: 22490

use with this element in the function call

function savesubcat(that){
$('#ulCategory li a').removeClass('active')
$(that).addClass('active')

}
.active {
  text-align: left;
  color: #fff;
  background-color: #ffbb00;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
  <li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABK</li>    

</ul>

Upvotes: 0

Pawan
Pawan

Reputation: 1744

You can use addClass() and removeClass() as below

HTML: 

<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    

</ul>

JQuery:

 $("#ulCategory>li").click(function(){
   $("#ulCategory>li").removeClass("active");
   $(this).addClass("active");
})

DEMO HERE

Upvotes: 0

AG_
AG_

Reputation: 2689

check below snippet

$(document).ready(function(){
  $("#ulCategory li").on('click', function(){
    $(this).siblings().removeClass('active');
    $(this).addClass('active')
  })
})
function savesubcat(){
  return null
}
.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    

</ul>

Upvotes: 4

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

<ul id="ulCategory">
  <li><a href="javascript:void(0)" class="subcategory">ABC</li> 
  <li><a href="javascript:void(0)" class="subcategory">ABF</li>    
  <li><a href="javascript:void(0)" class="subcategory">ABK</li>
</ul>

Jquery:

$(".subcategory").click(function() {
  $(this).addClass("active").not(this).removeClass("active");
});

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150030

Simply bind a click handler to the elements in question and use the .addClass() and .removeClass() methods.

Also, call your savesubcat() function from there too, rather than using the inline onclick= attribute.

var anchors = $("#ulCategory li a").click(function() {
  //savesubcat()
  $(this).addClass("active")
  anchors.not(this).removeClass("active")
})
.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="ulCategory">
   <li><a href='javascript:void(0)'>ABC</li> 
   <li><a href='javascript:void(0)'>ABF</li>    
   <li><a href='javascript:void(0)'>ABK</li>    
</ul>

Put the JS at the end of the body, and/or wrap it in a document ready handler.

(I'm assuming the savesubcat() function doesn't cause page navigation or refresh, because if it did then any classes set before the refresh would be cleared.)

Upvotes: 1

Related Questions