javascript的点击跳转之后，怎么添加样式
大家好，目前正在学习JavaScript课程，学着写了一个导航栏，就是点击该导航名的时候就自动添加class , 但是我写好后，如果点击不跳走（本页面里）的话，是好的，如果点击导航，跳转到其他（其他页面也正确加载了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="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帮忙分析解答下，谢谢！
