类活动不在页面上工作。

I know this question comes across a lot, but I just can't figure out how to do this using the, already answered posts. Here I am having different menus on a single page. When I click on each menu I want that menu to be active but here it's not working.

我知道这个问题会遇到很多问题，但是我不知道如何使用已经回答过的帖子来解决这个问题。这里我在一个页面上有不同的菜单。当我点击每一个菜单时，我希望菜单是活跃的，但在这里它不起作用。

This is my view page:

这是我的视图页面:

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

This is my jQuery:

这是我的jQuery:

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

3 个解决方案

#1

Here is a sample way to do it. By the way. since i cannot have a snippet of you html code for the navigation list i just created a simple one

这里有一个示例方法。顺便说一下。由于我无法获得导航列表的html代码片段，所以我创建了一个简单的代码

here is the html i created

这是我创建的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>

here is the javascript

这是javascript

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

DEMO

演示

#2

Try this : You can wrap your script in $(function(){..}); so that it will ensure DOM is ready. Also your jquery selector need to be corrected because as per class="nav navbar-nav navbar-right" your selector must be .nav.navbar-nav and not .nav navbar-nav (this says there is child navbar-nav inside nav. see below code

试试这个:您可以用$(function(){.})包装您的脚本;确保DOM准备就绪。同样，您的jquery选择器需要更正，因为根据class="nav navbar-nav navbar-right"，您的选择器必须是.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');
  });
});

And if you are creating these elements dynamically then use .on() as shown below -

如果要动态创建这些元素，那么使用.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

Try the following

试试以下

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

use this to trigger the active class on page load:

使用这个来触发页面加载上的活动类:

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

#1