我正在尝试在菜单单击时隐藏/显示 div答案

【问题标题】：I'm trying to hide/show divs on menu click我正在尝试在菜单单击时隐藏/显示 div
【发布时间】：2013-11-12 13:59:56
【问题描述】：

我的菜单有一个 div <div class="menu"> 这样编码； <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 应该做的是根据菜单点击换出。

【问题讨论】：

您还必须隐藏所有其他 div，而不仅仅是显示点击链接的那个。

标签： javascript html menu swap

【解决方案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

【讨论】：

这个效果最好！一个问题。这些页面不会相互覆盖。有小费吗？我的意思是当我点击不同的菜单选项时，“关于”页面需要以某种方式隐藏。如果这有任何意义。
你，先生，真棒。非常感谢！

【解决方案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;
    }

【讨论】：

【解决方案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';
    }
}

【讨论】：