-3

私が貢献しているサイトでは、ナビゲーション用のページを追加できません。したがって、対応する情報を備えたナビゲーションのような機能を持たせるには、Javascript を使用したトグル ナビゲーションを使用するのが最善であると考えました。私はjavascriptが初めてなので、トグルを機能させるところまで行きました。選択したナビゲーション リンクを強調表示するにはどうすればよいですか? 次に、選択したナビゲーション リンクのオンロードを強調表示するにはどうすればよいですか?

<script>
    function toggleID(IDS) {
        var area = document.getElementById('content');
        var sel = area.getElementsByTagName('div');
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
        if (IDS == '') { return; }
        document.getElementById(IDS).style.display = 'block';    
    }
    onload = function() {
        toggleID('level1');
    }
</script>

<body>
    <ul id="nav-vertical">
        <li onclick="toggleID('level1')">level 1</li>
        <li onclick="toggleID('level2')">level 2</li>
    </ul><!-- /.nav-vertical -->
    <div id="content">
    <div id="level1">
      <p>this is content for level1.</p>
    </div>
    <div id="level2">
      <p>this is content for level2.</p>
    </div>
    </div>
</body>
4

1 に答える 1

0

色の変更を実現するために、関数を変更できますtoggleID。

<script>
    function toggleID(IDS, clickedObject) {

        // toggle the color of the clickedObject too
        if ( clickedObject && clickedObject.style.backgroundColor == 'red' ) {
            clickedObject.style.backgroundColor = 'transparent';
        }
        else if ( clickedObject ) {
            clickedObject.style.backgroundColor = 'red';
        }

        var area = document.getElementById('content');
        var sel = area.getElementsByTagName('div');
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
        if (IDS == '') { return; }
        document.getElementById(IDS).style.display = 'block';    
    }
    onload = function() {
        toggleID('level1');
    }
</script>

<body>
    <ul id="nav-vertical">
        <li onclick="toggleID('level1', this)">level 1</li>
        <li onclick="toggleID('level2', this)">level 2</li>
    </ul><!-- /.nav-vertical -->
</body>

クリックしたリンクを関数の2番目のパラメーターとして指定し、関数の背景色プロパティを切り替えることができます。

于 2012-06-10T08:18:36.697 に答える