点击相应网页链接，左侧导航栏变色做法

如何做到点击左侧导航栏，右侧出现相应网页，同时导航栏相应位置变色？

用

a:link{color: #blue; TEXT-DECORATION: none;}
a:visited {COLOR: #red; TEXT-DECORATION: none}
a:active {COLOR: #3333ff; TEXT-DECORATION: none}
a:hover {COLOR: #ff0000; TEXT-DECORATION: none}

是没有用的，一是因为谷歌浏览器不支持visited visited的红色会把link的蓝色覆盖掉，二是即使链接点击后，导航栏相应栏目变色了，它就永远

这个颜色，不会因为你点击另一个链接而恢复原状（点击此栏前的颜色）

正确的做法是，每次都擦除上一次的变色效果，在两个样式间切换，代码如下：

代码如下:
css文件:
navigate.css

</pre><pre name="code" class="html">body {
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
}

.big-bold {
	font-size:14px;
	font-weight:bold;
	color:#000;
}

.normal {
	font-size:12px;
	font-weight:normal;
	color:#666;
}

html代码如下:
naviage.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link type="text/css" rel="stylesheet" href="css/navigate.css" />
        <script type="text/javascript" src="javascript/navigate.js"></script>
    </head>
    <body>
            <ul>
                <li>                   
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
            </ul>
    </body>
</html>

javascript代码:
navigate.js

/**
 * @author lvjian
 */
window.onload = initLinkStyle;
 
function initLinkStyle() {
    if(document.getElementsByTagName('a')){
        var arrLink = document.getElementsByTagName('a');
        for(i = 0; i < arrLink.length; i++) {
            var link = arrLink[i];
            link.className='normal';       
            link.onclick = clickNav;   
        }
    }
}
 
/**
 * 执行点击事件
 * @param {Object} event 鼠标事件
 */
function clickNav(event) {
    var target = event.currentTarget;   
     
    //擦出上次选择的a的样式
    if(document.getElementsByTagName('a')){
        var arrLink = document.getElementsByTagName('a');
        for(i = 0; i < arrLink.length; i++) {
            var link = arrLink[i];
            if(link.className == 'big-bold') {
                link.className = 'normal';
            }
        }
    }
     
    target.className = 'big-bold';
     
    return false;//阻止浏览器默认事件
}