0

トップナビゲーションリストがあり、それぞれがサイドにリンクのリストを開くと想定しています..これらのリンクのリストは最初は非表示になっているため、表示する必要があります（以前に表示されたリンクのリストは非表示にする必要があります）..対応するトップ ナビゲーション リンクをクリックすると、サイド リンクが完全に表示されますが、これらのリンクのいずれかをクリックすると、すべてのサイド リンクが消えます。関数を呼び出して表示を維持することで解決しましたが、別の問題が発生しました。別のトップ ナビゲーション リンク (リンクの別のサイド リストを開くと思われる) をクリックすると、最初のリンクは非表示にならず、2 番目のリンクは表示されません!! 長い間新しいものを検索して試した後、私は多くのことを試しました..それでも正しく動作しません!

私の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 に答える