Javascript div背景颜色来回变化，一次只高亮显示一个div

嗨，我有一个水平导航栏，当点击每个部分时，背景颜色会来回切换。但是，我希望只有一个部分是“活动的”。换句话说，一次只能有一个部分具有不同的背景颜色

<ul class="nav">
    <li><a href="javascript:Tog('1')" onclick="changeColor(this)">Search</a></li>
    <li><a href="javascript:Tog('2')" onclick="changeColor(this)">Legend</a></li>
    <li><a href="javascript:Tog('3')" onclick="changeColor(this)">Info</a></li>
</ul>"

---

感谢您使用纯javascript提供的帮助：

    <ul class="nav">
        <li><a href="#1" id="link1"  onclick="changeColor(this)">Search</a></li>
        <li><a href="#2" id="link2" onclick="changeColor(this)">Legend</a></li>
        <li><a href="#3" id="link3" onclick="changeColor(this)">Info</a></li>
    </ul>

    <script type="text/javascript">
        function changeColor(e) {
            var arr =e.parentNode.parentNode.querySelectorAll('.color1');
            for(var i=0;i<arr.length;i++){
                arr[i].className = 'nav';
            }
            var c = e.className;    
            e.className = (c == 'color1') ? 'nav'  : 'color1'; 
            checkHashChange();
        }

        var currentPage = 0;
        function checkHashChange(){
            var newPage = window.location.href.substring(window.location.href.length -1 , window.location.href.length);
            if(currentPage != newPage) {
                currentPage = newPage;
                changeColor(document.getElementById('link'+currentPage));
            }
            setTimeout('checkHashChange();', 100);
        }
    </script>
    <style type="text/css">
        .color1{
        background: #444;
        }

        .nav{
        background: #eee;
        }
    </style>

函数更改颜色（e）{
var arr=e.parentNode.parentNode.querySelectorAll（'.color1'）；
对于（var i=0；iHi谢谢。一次只能突出显示一个部分。但是，如果我单击同一部分，它不会恢复到原始颜色。换句话说，如果我单击一个部分两次，第二次单击不会改变颜色。他不是在使用纯javascript吗。对不起，我认为我不明白。这是不是意味着无法使用纯javascript完成吗？@Akhil Sekharan。嗨，我想知道您是否有机会查看我的评论。非常感谢！您必须进行轮询以检查url的当前哈希，以满足同一页面上的后退按钮
    <ul class="nav">
        <li><a href="#1" id="link1"  onclick="changeColor(this)">Search</a></li>
        <li><a href="#2" id="link2" onclick="changeColor(this)">Legend</a></li>
        <li><a href="#3" id="link3" onclick="changeColor(this)">Info</a></li>
    </ul>

    <script type="text/javascript">
        function changeColor(e) {
            var arr =e.parentNode.parentNode.querySelectorAll('.color1');
            for(var i=0;i<arr.length;i++){
                arr[i].className = 'nav';
            }
            var c = e.className;    
            e.className = (c == 'color1') ? 'nav'  : 'color1'; 
            checkHashChange();
        }

        var currentPage = 0;
        function checkHashChange(){
            var newPage = window.location.href.substring(window.location.href.length -1 , window.location.href.length);
            if(currentPage != newPage) {
                currentPage = newPage;
                changeColor(document.getElementById('link'+currentPage));
            }
            setTimeout('checkHashChange();', 100);
        }
    </script>
    <style type="text/css">
        .color1{
        background: #444;
        }

        .nav{
        background: #eee;
        }
    </style>