Question

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

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

Answer 1

这似乎有效：

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，并且它还没有被使用。

FIDDLE

保持div显示并隐藏旧的

1 个答案: