保持div顯示並隱藏舊的

我有一個頂部導航列表，每個假設打開一邊的鏈接列表..這些鏈接列表首先隱藏然後，它應該顯示（和以前顯示的鏈接列表應該隱藏）.. 當我點擊相應的頂部導航鏈接時，側面鏈接顯示完美，但每當我點擊其中一個鏈接，所有側面鏈接消失..通過調用函數來解決它它顯示了，但是接下來出現了另一個問題。當我點擊另一個頂部導航鏈接（假設打開另一個鏈接列表）時，第一個鏈接不會隱藏，而第二個鏈接不會顯示！！經過很長時間的搜索和嘗試新的東西，我嘗試了很多東西..但它不能正常工作！保持div顯示並隱藏舊的

我的javascript：

var prevItem = null; 
function hereB(t) 
{ 
    switch (t) 
    { 
     case 'item-1': 
     showIT('left-1'); 
     break; 
     case 'item-2': 
     showIT('left-2'); 
     break; 
    } 
    if(prevItem != null) 
    {  
     var preI = document.getElementById(t); 
     prevItem.className += "box"; 
     prevItem.className = prevItem.className.replace(/{\b}?hereB/, ""); 
    } 
    t.className += " hereB"; 
    prevItem = t; 
} 

function inform(t){alert(document.getElementById(t))} 

function showIT(d) 
{   
    switch(d) 
    { 
     case 'left-1':            
     document.getElementById('left-2').style.display="none"; 
     document.getElementById('left-2').style.visibility="hidden"; 

     document.getElementById(d).style.display="block"; 
     document.getElementById(d).style.visibility="visible";   
     break; 
     case 'left-2': 
     document.getElementById('left-1').style.display="none"; 
     document.getElementById('left-1').style.visibility="hidden"; 

     document.getElementById(d).style.display="block"; 
     document.getElementById(d).style.visibility="visible"; 
     break; 
    } 
}

這裏是在的jsfiddle整個事情：

http://jsfiddle.net/ZPbNE/4/

任何建議，將不勝感激..

** * *** 更新完整的答案 ** * ** * 整個Java腳本代碼，使一切工作正常和正常是這樣的：

<script type="text/javascript"> 
var prevItem = null; 
function hereB(t) 
{  

    showIT(t.hash.substr(1)); 
    if(prevItem != null) 
    {  
     prevItem.className += "box"; 
     prevItem.className = prevItem.className.replace(/{\b}?activeTOP/, ""); 
    } 
    t.className += " activeTOP"; 
    prevItem = t; 
} 

function showIT(d) 
{  

    switch(d) 
    { 
     case 'left-1':            
     document.getElementById('left-2').style.display="none"; 
     document.getElementById('left-2').style.visibility="hidden"; 

     document.getElementById(d).style.display="block"; 
     document.getElementById(d).style.visibility="visible"; 
     break; 
     case 'left-2': 
     document.getElementById('left-1').style.display="none"; 
     document.getElementById('left-1').style.visibility="hidden"; 

     document.getElementById(d).style.display="block"; 
     document.getElementById(d).style.visibility="visible"; 
     break; 
     default: 
     document.getElementById('left-1').style.display="none"; 
     document.getElementById('left-1').style.visibility="hidden"; 
     document.getElementById('left-2').style.display="none"; 
     document.getElementById('left-2').style.visibility="hidden"; 
     break; 
    }  
} 
</script>

在HTML

調用它：

<a href="#item-4" onClick="hereB(this)"> GO item-5 </a>

來源

2013-09-21 user2517408

什麼是你應該在'hereB（）''的聲明之開關來匹配？ 't'是'this'，它是錨元素，不是字符串。你的情況與'href'值不匹配，唯一匹配的就是父'LI'的ID。 – Barmar

謝謝你SOOOOOOO很多..我只是取代'代碼'這個名稱的股利，它神奇地工作:)）你會請回答我的Q作爲答案，所以我檢查它的答案？再次感謝你 – user2517408

這似乎工作：

function hereB(t) { 
    showIT(t.hash.substr(1)); 
    if (prevItem != null) { 
     prevItem.className += "box"; 
     prevItem.className = prevItem.className.replace(/{\b}?hereB/, ""); 
    } 
    t.className += " hereB"; 
    prevItem = t; 
}

我刪除了switch聲明，只是使用的ID在href的哈希值。我也刪除了preI的任務;它給了一個節點而不是一個字符串到getElementById，而且它還沒有被使用。

FIDDLE

來源

2013-09-21 19:37:49 Barmar

謝謝你的回答..對我的問題的評論已經正確回答..我是js新手，所以我真的不知道什麼是「散列」。我會搜索它，並得到更多關於js的教程..再次感謝您的迴應 – user2517408

散列是以'＃'開頭的href中URL的一部分。 – Barmar

謝謝你解釋..我的意思是我不知道整個聲明是什麼意思..我可以問另一個相關的Q嗎？在將thisB（this）更改爲hereB（'item-1'）後，活動鏈接的效果已經消失了......所以我在js代碼中將「t」替換爲document.getelementbyid（t），然而css-effecs以前工作不工作了，你有什麼想法嗎？謝謝 – user2517408

保持div顯示並隱藏舊的

回答

相關問題