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>

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

1 个答案: