带引导侧边栏的活动类

Question

单击后侧边栏需要更改活动类。这是我的引导代码，我用这个 javascript 代码尝试过，但它不起作用。

 $(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

请尝试如下。

<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

如何取消设置 .active 类形式的兄弟姐妹并将其设置为当前的最简单方法是

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

Answer 3

尝试这个

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

Answer 4

首先，您必须从所有anchor标签中删除active类。 然后，您可以将active类添加到单击的anchor标记中。 此外，您必须使用e.preventDefault()来阻止浏览器重定向。

 $('.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>