当显示另一个div时隐藏div

所以，我有一个导航元素，其中包含一个用作制表符的unorder列表。有三个，你点击一个，它在网站上显示一个div。但是，我希望如果您点击另一个，它会隐藏当前显示的那个，然后显示您点击的那个。但我似乎无法做到。下面是函数，我有：当显示另一个div时隐藏div

function display(action, id) 
{ 
if (action == 'show') 
{ 
document.getElementById("page"+id).style.display = "block"; 
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")"; 
} 

if (action == 'hide') 
{ 
document.getElementById("page"+id).style.display = "none"; 
document.getElementById("link"+id).href= "javascript:display('show', "+id+")"; 
} 
} 

</script>

我试图做类似

的document.getElementById（ “页” + ID + 1）.style.display = “无”;

我认为它会改变显示样式，而不是使用比当前ID多一个ID的div，而是它什么都不做。我会添加什么来让它隐藏当前打开的所有标签？

来源

2012-02-02 sbatson5

你能粘贴HTML藏汉存储DIV的名字吗？ – Niklas 2012-02-02 22:15:35

仅供将来参考：如果最终使用jQuery，也可以尝试使用toggle（）（http://api.jquery.com/toggle/）。 – summea 2012-02-02 22:20:12

，你也可以在Hidden Input

http://jsfiddle.net/we2AJ/

<body> 
    <script language="javascript"> 
     function MyFunction(divName){ 

     //hidden val 
     var hiddenVal = document.getElementById("tempDivName"); 

     //hide old 
     if(hiddenVal.Value != undefined){ 
      var oldDiv = document.getElementById(hiddenVal.Value); 
      oldDiv.style.display = 'none'; 
     } 

     //show div 
      var tempDiv = document.getElementById(divName); 
      tempDiv.style.display = 'block';    

     //save div ID 
      hiddenVal.Value = document.getElementById(divName).getAttribute("id"); 

     } 
    </script> 
    <input id="tempDivName" type="hidden" /> 
    <ul> 
     <li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li> 
     <li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li> 
     <li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li> 
    </ul> 
    <br/> 
    <div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none"> 
     myDiv1 
    </div> 
    <div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none"> 
     myDiv2 
    </div> 
    <div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none"> 
     myDiv3 
    </div> 
</body>

来源

2012-02-02 22:27:13 feco

我宁愿使用全局JavaScript变量var visible ='myDiv1' - 在函数的外部，然后删除隐藏的输入类型。使用该全局变量存储在单击链接/选项卡时可见的内容。 – Rose 2014-01-16 00:54:55

您可以通过利用css类来改进此代码的结构。首先，使用getElementsByClassName收集所有导航项。然后附加一个点击处理程序，指向您的切换代码。

在togglecode中，为显示的元素添加一个类，并将其删除，以旧的。我对你的html结构做了一些假设，但这应该很容易适应。 classList不支持< IE7，但如果需要支持，您可以substitute in a regex来处理此问题。

http://jsfiddle.net/8Q4vy/1/

<div class="nav show"><span>A</span></div> 
<div class="nav"><span>B</span></div> 
<div class="nav"><span>C</span></div> 
<script> 
    //get nav items 
    var navElems = document.getElementsByClassName('nav'); 

    //attach click handler to each 
    for (var i = 0; i < navElems.length; i++) { 
     navElems[i].onclick = toggleVisible; 
    } 

    //handle click events 
    function toggleVisible() { 
     //hide currently shown item 
     document.getElementsByClassName('show')[0].classList.remove('show'); 
     //show clicked item 
     this.classList.add('show'); 
    } 
</script>

来源

2012-02-02 22:17:54 mrtsherman

当显示另一个div时隐藏div

回答

相关问题