-3

我参与的网站不允许添加导航页面。因此，为了获得具有相应信息的类似导航的功能，我认为最好使用 Javascript 进行切换导航。由于我是 javascript 新手，所以我已经让切换工作正常了。如何突出显示选定的导航链接？其次，如何突出显示选定的导航链接 onload？

<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>

您可以将单击的链接作为函数的第二个参数提供，并在函数中切换其背景颜色属性。

于 2012-06-10T08:18:36.697 回答