Question

假设我有navbar结构：

  <ul class="nav navbar-nav navbar-left" id="menuitems">

                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=1">Home</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=2">Reds</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=3">Whites</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=4">Sparkling</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=5">Hidden Label</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=6">Mixed Cases</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=7">Spirits</a></li>
                    <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=8">Beer &amp; Cider</a></li>
                </ul>

当我点击链接时，我想删除该课程＆＃34; active＆＃34;来自所有<li>代码并将其附加到所点击链接的<li>标记，我该怎么做？

Answer 1

请检查下面的JS，这只有当你的页面没有重定向到其他页面的链接时才会起作用。

 $(document).ready(function(){
    $('.navbar-nav li a').click(function(){
     $('.navbar-nav li').removeClass('active');
     $(this).parent().addClass('active');
     });
 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-left" id="menuitems">
  <li><a href="#">Home</a></li>
  <li><a href="#">Reds</a></li>
  <li><a href="#">Whites</a></li>
  <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=4">Sparkling</a></li>
  <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=5">Hidden Label</a></li>
  <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=6">Mixed Cases</a></li>
  <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=7">Spirits</a></li>
  <li><a href="/Product/GetProductByCategoryForMasterMenu?CategoryId=8">Beer &amp; Cider</a></li>
</ul>

Answer 2

要删除您可以在行

下面使用的课程

$('ul.nav > li').removeClass('active')`

点击活动

$('ul.nav > li').on('click',function(){
  $(this).addClass('active')
});

Answer 3

尝试：

$('.nav li').click(function(){
  $(this).closest('ul.nav').find('li').removeClass('active');
  $(this).addClass('active');
});

如何在导航栏中获取具有特定类名的元素？

3 个答案: