类激活不在页面上工作

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');
  });
});

演示版