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

Question

使用纯CSS和一些JavaScript，如何设置删除并将类“活动”添加到我的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; 
    } 

Answer 1

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

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