大家好，目前正在学习JavaScript课程，学着写了一个导航栏，就是点击该导航名的时候就自动添加class , 但是我写好后，如果点击不跳走（本页面里）的话，是好的，如果点击导航，跳转到其他（其他页面也正确加载了JS）页面的话，这个效果就完全无效了，特来请教一下，如果是跳转到其他页面的应该怎么写呢？请帮忙分析下，谢谢！
5
698<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
.active {background: red;}
</style>
<script>
window.onload = function ()
{
var oNav = document.getElementById('nav1');
var oA = oNav.getElementsByTagName('a');
for (var i=0;i<oA.length;i++)
{
oA[i].onclick = function()
{
for (var i=0;i<oA.length;i++)
{
oA[i].className="";
}
this.className="active";
};
};
};
</script>
</head>
<body>
<p>
<nav id="nav1">
<a class="active" href="javascript:">首页</a>
<a href="javascript:">测试一</a>
<a href="javascript:">测试二</a>
<a href="javascript:">测试三</a>
<a href="javascript:">测试四</a>
<a href="javascript:">测试五</a>
<a href="javascript:">测试六</a>
<a href="javascript:">测试七</a>
</nav>
</p>
</body>
</html>下面的代码是跳转到其他页面的，当然其他页面也加载了这个CSS和JS，现在就是搞不懂，如果跳走到其他页面了，代码应该怎么写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
.active {background: red;}
</style>
<script>
window.onload = function ()
{
var oNav = document.getElementById('nav1');
var oA = oNav.getElementsByTagName('a');
for (var i=0;i<oA.length;i++)
{
oA[i].onclick = function()
{
for (var i=0;i<oA.length;i++)
{
oA[i].className="";
}
this.className="active";
};
};
};
</script>
</head>
<body>
<p>
<nav id="nav1">
<a class="active" href="#">首页</a>
<a href="http://www.xxx.com/ceshi1/index.html">测试一</a>
<a href="http://www.xxx.com/ceshi2/index.html">测试二</a>
<a href="http://www.xxx.com/ceshi3/index.html">测试三</a>
<a href="http://www.xxx.com/ceshi4/index.html">测试四</a>
<a href="http://www.xxx.com/ceshi5/index.html">测试五</a>
<a href="http://www.xxx.com/ceshi6/index.html">测试六</a>
<a href="http://www.xxx.com/ceshi7/index.html">测试七</a>
</nav>
</p>
</body>
</html>就是各种网站常见的那种导航，点击当前栏目，栏目高亮，请用原生JS帮忙分析解答下，谢谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
一般来说，这种需要保存当前状态的结构，比如导航，tab，幻灯片切换等等，都会用一个类似
index的变量来记录当前应该是谁要得到active了。页面刷新的时候我们需要有一个初始化页面的一个思路或者函数。比如init。如果你的页面要跳转到其他页面，你需要将index传递给其他页面，告诉另外一个页面第index个按钮需要高亮，新的页面通过init()函数将index的值在链接或者ajax中解析出来即可。简单写了一个例子，演示了index通过链接传递，是往自己的页面跳转。如果你想跳转到其他页面，将url改一改就行了
那啥，挺原始的写法哈……
如果照你这样，每个页面都包含自己的菜单，那么完全没必要手动处理active，直接每个页面写死就行。当然，我估计你不想这样。
那么，通常正确的做法是。只有一个index页面，内容部分通过iframe或ajax加载。各页面切换时不刷新页面，而是修改iframe的src或者ajax后替换内容部分。
如果用iframe的话，那么你需要把a标签里面的href改为data-url(或者其他任何你喜欢的属性)
然后在给click添加event参数，并加上frame跳转语句
记住一点，页面刷新，所有文件重新加载，那就从头来。
刷新页面跳转还要添加样式，目前我知道有两个方法。
一、跳转的时候在url中做标记，在js里面做一个判断，通过标记给对应元素添加样式。
二、写一个全局url匹配方法，访问某些url给指定元素添加样式。
实际网站中，通常用php做页面判断，判断为是 则相应的li解析出来有active样式，判断为否则li中的active样式不解析
给url后面加一个参数，比如a.php？1，取url后面的1，判断对应的是第一个导航添加一个选中的class