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

➨ Live demo

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

我想在菜单点击上隐藏/显示div

3 个答案: