當顯示另一個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

回答

相關問題