我正在尝试在菜单单击上隐藏/显示div

Question

我的菜单<div class="menu">有一个div，其编码如下： <a href="#" onclick="show('about')">About Us</a>我的页面<div class="pages">有一个div，其中包含许多使用不同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

<a href="#" onclick="toggle('about');">About Us</a>
<a href="#" onclick="toggle('contact');">Contact</a>

<div class="article" id="about" style="display:none;">ABOUT ARTICLE...</div>
<div class="article" id="contact" style="display:none;">CONTACT ARTICLE...</div>

function toggle(target){

  var artz = document.getElementsByClassName('article');
  var targ = document.getElementById(target);  
  var isVis = targ.style.display=='block';

  // hide all
  for(var i=0;i<artz.length;i++){
     artz[i].style.display = 'none';
  }
  // toggle current
  targ.style.display = isVis?'none':'block';

  return false;
}

➨ 现场演示

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