用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文件
展开
 我来答
网海1书生
科技发烧友

2017-12-06 · 擅长软件设计、WEB应用开发、小程序
网海1书生
采纳数:12311 获赞数:26228

向TA提问 私信TA
展开全部

这是当然的,页面都跳转了,样式肯定不可能自动转到刷新后的页面啦,否则的话如果我的网站通过链接跳转到百度的页面,而刚好我网站的样式与百度的重叠,那么页面就会乱糟糟了。

而前面那两个链接并没有刷新页面,还是在当前页面,肯定就有效果啦。

你应该给每个页面指定一个编号,这样在页面加载时再把对应的导航菜单叠加上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,不太懂
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式