[英]class active not working on page
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>
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');
});
});
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');
});
Try this : You can wrap your script in $(function(){..});
试试这个:你可以将你的脚本包装在
$(function(){..});
so that it will ensure DOM is ready. 这样它就能确保DOM准备就绪。 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 你的jquery选择器也需要更正,因为按照
class="nav navbar-nav navbar-right"
你的选择器必须是.nav.navbar-nav
而不是.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');
});
});
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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.