javascript - div 背景颜色来回变化，一次只有一个突出显示的 div

Question

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

<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

function changeColor(e) {
var c = e.className;
e.className = (c == 'color1') ? 'nav'  : 'color1'; 
}

感谢您的任何帮助

Answer 1

通过使用纯 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>