Question

我知道这个问题遇到了很多，但我无法弄清楚如何使用已经回复的帖子来解决这个问题。在这里，我在一个页面上有不同的菜单。当我点击每个菜单时，我希望该菜单处于活动状态，但这里不起作用。

这是我的观点页面：

<ul class="nav navbar-nav navbar-right">
  <li class="active"> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#about">About</a> </li>
  <li class=""><a class="page-scroll" href="<?php echo site_url('nowaste_control/index#product'); ?>">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#technology">Technology</a> </li>
</ul>

这是我的jQuery：

<script type="text/javascript">
$('.nav navbar-nav li a').click(function($) {
  $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
});
</script>

Answer 1

以下是一种示例方法。顺便说说。因为我没有你的导航列表的html代码片段，我刚刚创建了一个简单的

这是我创建的html

<div class="nav">
  <li class="active"> <a class="page-scroll" href="#about">About</a> </li>
  <li class=""><a class="page-scroll" href="#product">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="#technology">Technology</a> </li>
</div>

这是javascript

$(document).ready(function(){
  $(document).on('click', '.nav li a', function () {
    console.log($(this));
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});

DEMO

Answer 2

尝试以下

$(function(){
    $('.page-scroll').on('click',function(){
       $('.active').removeClass('active');
    $(this).parent().addClass('active');
    });
   });

使用它来触发页面加载时的活动类：

$(function(){
$('.active').removeClass('active');
$('a[href="'+window.location.href'"]').parent().addClass('active');
});

Answer 3

试试这个：您可以将脚本包装在$(function(){..});中，以确保DOM准备就绪。此外，您的jquery选择器需要更正，因为根据class="nav navbar-nav navbar-right"，您的选择器必须是.nav.navbar-nav而不是.nav navbar-nav（这表示navbar-nav内有子nav。见下面的代码

$(function(){
   //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav"
   $('.nav.navbar-nav li a').click(function($) {
   $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
  });
});

如果您要动态创建这些元素，请使用.on()，如下所示 -

$(function(){
       //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav"
       $(document).on('click','.nav.navbar-nav li a',function($) {
       $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
      });
 });

类激活不在页面上工作

3 个答案: