0

我有一个顶部导航列表，每个人都假设在侧面打开一个链接列表..这些链接列表最初是隐藏的，然后应该显示（并且之前显示的链接列表应该隐藏）..当我点击相应的顶部导航链接时，侧链接完美显示，但是每当我单击其中一个链接时，所有侧链接都会消失。通过调用函数来解决它以保持显示，但随后又出现了另一个问题。当我单击另一个顶部导航链接（假设打开另一个链接列表）时，第一个不会隐藏..并且第二个不会显示！经过长时间的搜索和尝试新东西，我尝试了很多东西..但它不能正常工作！

我的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>
4

1 回答 1

0

这似乎有效：

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语句，并仅在 href 的哈希中使用了 ID。我还删除了preI; 它给了一个节点而不是一个字符串getElementById，但无论如何它都没有被使用。

小提琴

于 2013-09-21T19:37:49.533 回答