课程活动在页面上不起作用

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(){..}); 中，这样它就可以确保 DOM 已准备就绪。此外，您的 jquery 选择器需要更正，因为根据 class="nav navbar-nav navbar-right"，您的选择器必须是 .nav.navbar-nav 而不是 .nav navbar-nav（这表示 nav 内有子 navbar-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');
      });
 });

Answer 3

试试下面的

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