用js制作导航的当前栏目css样式 ,为什么设置不成功呢?
JS代码是这样的:var$nava=$(".navul");$nava.children("li").click(function(){$(this).children(...
JS代码是这样的:
var $nava=$(".nav ul");
$nava.children("li").click(
function(){
$(this).children("a").addClass("active");
$(this).siblings().children("a").removeClass("active")
});
HTML代码是这样的:
<div class="nav">
<nav>
<ul>
<li><a href="javascript:void(0)" class="home active">首页</a></li>
<li><a href="javascript:void(0)" class="profile">公司简介</a></li>
<li><a href="joinus.html">人才招聘</a></li>
</ul>
</nav>
</div>
其中本页内的跳转都没有问题,但是跳转到另一个网页的就不行,比如最后一个人才招聘是不行的。
点击后,跳转到相应网页,但是active还是在首页上面。
人才招聘和首页的头部是一模一样的,都有引用的相应JS文件 展开
var $nava=$(".nav ul");
$nava.children("li").click(
function(){
$(this).children("a").addClass("active");
$(this).siblings().children("a").removeClass("active")
});
HTML代码是这样的:
<div class="nav">
<nav>
<ul>
<li><a href="javascript:void(0)" class="home active">首页</a></li>
<li><a href="javascript:void(0)" class="profile">公司简介</a></li>
<li><a href="joinus.html">人才招聘</a></li>
</ul>
</nav>
</div>
其中本页内的跳转都没有问题,但是跳转到另一个网页的就不行,比如最后一个人才招聘是不行的。
点击后,跳转到相应网页,但是active还是在首页上面。
人才招聘和首页的头部是一模一样的,都有引用的相应JS文件 展开
1个回答
展开全部
这是当然的,页面都跳转了,样式肯定不可能自动转到刷新后的页面啦,否则的话如果我的网站通过链接跳转到百度的页面,而刚好我网站的样式与百度的重叠,那么页面就会乱糟糟了。
而前面那两个链接并没有刷新页面,还是在当前页面,肯定就有效果啦。
你应该给每个页面指定一个编号,这样在页面加载时再把对应的导航菜单叠加上active类,比如第3个页面可以这样:
var pageId=2; //2是第三个页面(从0起算);
$(function(){
$(".nav a").removeClass("active"); //如果每个菜单默认是没有active类的,此行可省略
$(".nav a").eq(pageId).addClass("active");
});
当然,也可以根据当前页面的文件名或其他信息来决定让哪个菜单项为当前项。总之,你不要指望在当前页面去直接控制跳转后的页面样式。
追问
这样怎么操作呢, $(".nav a").eq(pageId).addClass("active"); 这里是有问题的吧,怎么能先选择元素,再选择页面呢? 还有就是 给每个页面怎么指定ID,不太懂
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询