CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zone Duo
Zone Duo

Reputation: 103

change active class of ul list using anchor tag click

I am trying to add or remove active class for list element by clicking the link inside it.

<ul>
   <li id="l1" class=""><a href="javascript:;" class="btn1"> one</a></li>
   <li id="l2" class=""><a href="javascript:;" class="btn2">two</a></li>                                                   
</ul>

 $('.btn1').click(function() {     
    $( "#l1" ).addClass( "active" );   
    $( "#l2" ).removeClass( "active" );        
    window.open ('/one');

});

$('.btn2').click(function() {       
    $( "#l2" ).addClass( "active" );
    $( "#l1" ).removeClass( "active" );     
    window.open ('/two');

});

My html and css classes as above. But it doesn't work as expected. So anyone know how to resolve it?

Upvotes: 0

Views: 3648

Answers (4)

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

My HTML and CSS classes as above

Basically, your code works well. You need to add CSS like .active{ color:red;}.

However, listen to the event click for each button is not a good thing to do. Imagine you have about 10/100/1000 button then you have to Copy/Pase code like this?

You should keep in mind that: Don't repeat yourself.

So as a result, I've refactored code for you like below. Cheers!

$('.btn').click(function() {     
    $('.btn').closest('li').removeClass("active");   
    $(this).closest('li').addClass("active");  
    
    var content = $(this).data('value');
    $("#content").html(content);
});
.active{
    color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li id="l1" class=""><a href="javascript:;" data-value="Content1" class="btn"> one</a></li>
   <li id="l2" class=""><a href="javascript:;" data-value="Content2" class="btn">two</a></li>   
</ul>
<div id="content" style="width:100px; height: 100px">

</div>

Edit

Basically, you should get content then assign it to div content below instead of navigating. If you still want to navigate, you should store your data by using localStorage

Upvotes: 1

2pha
2pha

Reputation: 10155

 // One click handler for all buttons/links.
 $('.btn').click(function(event) {
    // Remove class from all buttons.
    $('.btn').parent().removeClass('active');
    // Get the specific button that was clicked.
    var btn = $(this);
    // Add active class to it's parent.
    btn.parent().addClass('active');
    //open from the data-link attribute on the link. 
    // though, window.open will probably be blocked by the browser popup blocker.
    window.open(btn.attr('data-link'));

});
.active {
  background-color: #ff0000;
}
a.btn {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
   <!-- you could save where to link to in a data attribute, though I am not sure why you wouldn't just have it in href -->
   <li id="l1" class=""><a href="/one" data-link="/one" class="btn btn1"> one</a></li>
   <li id="l2" class=""><a href="/two" data-link="/two" class="btn btn2">two</a></li>                                               
</ul>

Upvotes: 0

symlink
symlink

Reputation: 12209

$('.btn').click(function() {     
    $('.btn').closest('li').removeClass("active")
    $(this).closest('li').addClass("active")  
    console.log($(this).data("url"))
})
li.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li id="l1" class=""><a href="javascript:;" class="btn" data-url="/one"> one</a></li>
   <li id="l2" class=""><a href="javascript:;" class="btn" data-url="/two">two</a></li>                                                   
</ul>

Upvotes: 1

Philip McAsey
Philip McAsey

Reputation: 11

Try:

$(".btn1").click(function(){
$("ul li").removeClass('active'); 
$("#l1").toggleClass('active');
window.open ('/one');
});

Note line 2 // will remove class active from all bullets in all list add a #id to the selector to specify a specific list.

Upvotes: 0

Related Questions