Question

我参与的网站不允许添加导航页面。因此，为了获得具有相应信息的类似导航功能，我认为最好使用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>

Answer 1

要实现颜色更改，您可以修改功能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>

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

更改ToggleID链接的颜色

1 个答案: