引导导航栏菜单项li a在特定页面中更改活动类

Bootstrap navbar menu item li a change the active class when in the specific page

本文关键字：活动 导航 菜单项 li      更新时间：2023-09-26

使用纯CSS和一些javascript，如何将类"active"移除并添加到我的li项中？我尝试在javascript中使用"onclick"函数。它会更改项目的颜色，但不会将我重定向到所选项目的链接。

<div class="main_navs">
    <ul class="nav navbar-nav">
        <li><a href="index.php" class="main_navmenu active">Home</a></li>
        <li><a href="product.php" class="main_navmenu">Products</a></li>
        <li><a href="services.php" class="main_navmenu">Services</a></li>
        <li><a href="account.php"> Wishlist</a></li>
        <li><a href="login.php"> Register</a></li>
        <li><a href="gift_card.php"> Gift Card</a></li>
        <li><a href="cart.php" class="main_navmenu"
           <i class="fa fa-shopping-cart"></i> Cart <span class="badge">0</span></a></li>
    </ul>
</div>
 <script type="text/javascript">
     $('#main_menu_items li a').on('click', function(){
          $('li a.active').removeClass('active');
          $(this).addClass('active');
     });
 </script>

CSS：

     .main_navs ul li a.active{
          background: rgba(255,255,255,0.2);
          color: #333;
     }
     .main_navs ul li a{
          background: rgba(0,0,0,1);
          color: #fff;
     }

我认为这应该能帮到你。它应该在页面加载时将活动类添加到菜单中的匹配锚。

<script>
$(function() {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/'/$/, '') + "$");
    $('.main_navs a').each(function() {
        if (urlRegExp.test(this.href.replace(/'/$/, ''))) {
            $(this).addClass('active');
        }
    });
});
</script>

首先删除尾部斜杠，然后它将等于您想要匹配的url。

我的解决方案是：

var current = window.location.href;
  var current_url = current.replace(/'/$/, "");
  $('.navbar-nav a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(current_url) !== -1){
      $this.addClass('active');
    }
  });
相关文章：