javascript - 我试图在菜单点击时隐藏/显示 div

Question

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

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

➨ Live demo