带引导侧边栏的活动类

Question

The sidebar needs to change active class after click.This is my bootstrap code and i tried it with this javascript code but it doesn't works.

 $(function(){ $('.sidebar1 a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active') $('.sidebar1 a').click(function(){ $(this).parent().addClass('active').siblings().removeClass('active') }) })

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="sidebar"> <div class="list-group"> <ul class="siderbar1"> <li><a href="HhwController" class="list-group-item active">Hoe het werkt</a></li> <li><a href="OveronsController" class="list-group-item">Over ons</a></li> <li><a href="VpController" class="list-group-item">Veiligheid en privacy</a></li> <li><a href="FAQController" class="list-group-item">FAQ</a></li> <li><a href="Contactform" class="list-group-item">Contact</a></li> </ul> </div> </div>

Answer 1

please try like below.

<script type="text/javascript">
$(function(){
    // $('.sidebar1 a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active'); i have not tried this line
    $('.sidebar1 a').click(function(){
      $(".list-group-item").removeClass('active');
       $(this).addClass('active');          
    })
})
</script>

Answer 2

The easiest way how to unset .active class form siblings and set it to current one is

$('.sidebar1 a').click(function(){
    $('.sidebar1 .active').removeClass('active');
    $(this).parent().addClass('active');
});

Answer 3

try this

$('.sidebar1 a').click(function(){
    $('.sidebar1 .active').removeClass('active');
    $(this).parent().addClass('active');
});

Answer 4

First you have to remove active class from all anchor tags. Then, you can add active class to the anchor tag which is clicked. Also, you have to use e.preventDefault() , to stop browser from redirecting.

 $('.siderbar1 a').on('click', function(e) { e.preventDefault(); $('.siderbar1 a').removeClass('active'); $(this).addClass('active'); })

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="sidebar"> <div class="list-group"> <ul class="siderbar1"> <li><a href="HhwController" class="list-group-item active">Hoe het werkt</a></li> <li><a href="OveronsController" class="list-group-item">Over ons</a></li> <li><a href="VpController" class="list-group-item">Veiligheid en privacy</a></li> <li><a href="FAQController" class="list-group-item">FAQ</a></li> <li><a href="Contactform" class="list-group-item">Contact</a></li> </ul> </div> </div>