Question

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

＆＃13;

$(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')	
    })
})

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

首先，您必须从所有active标记中删除anchor类。然后，您可以将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>

Answer 3

请尝试如下。

<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 4

试试这个

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

带有bootstrap边栏的活动类

4 个答案: