0

こんにちは、各セクションをクリックすると背景色が前後に切り替わる水平ナビゲーション バーがあります。ただし、1 つのセクションだけが「アクティブ」になるようにしたいと思います。つまり、一度に 1 つのセクションだけが異なる背景色を持つことができます。

<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'; 
}

助けてくれてありがとう

4

1 に答える 1

0

純粋な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>
于 2012-11-16T03:17:08.977 に答える