javascript - 我正在尝试在菜单单击时隐藏/显示 div

Question

我有一个<div class="menu">这样编码的菜单的 div；<a href="#" onclick="show('about')">About Us</a> 我的页面有一个 div，<div class="pages">其中包含不同 div id 下的许多页面。例子; <div id="about" style='display:block'> Javascipt：

<script>
        function show(target){
        document.getElementById(target).style.display = 'block';
        }
        function hide(target){
        document.getElementById(target).style.display = 'none';
        }


    </script>

我不知道我做错了什么，但是 div 应该做的是根据菜单点击换出。

Answer 1

Answer 2

您需要首先隐藏除最初显示的 div 之外的所有 div，然后返回 false 以防止链接的默认操作，因为它有一个锚点

    function show(target){
       document.getElementById(target).style.display = 'block';
       return false;
    }
    function hide(target){
       document.getElementById(target).style.display = 'none';
       return false;
    }

Answer 3

您需要先隐藏所有页面，然后显示被选中的页面。您还需要处理链接的默认行为（即页面导航）

这可能适用于您现有的 HTML：

function show(target){
    hideAllPages();//hide all pages
    document.getElementById(target).style.display = 'block';//show selected page
    return false;//cancel page navigation
}

function hideAllPages(){
    var pages = document.getElementsByClassName("pages");
    for(var i = 0; i < pages.length; i++){
        pages[i].style.display = 'none';
    }
}