別のものが表示されているときにdivを非表示にする

したがって、タブとして使用する順序リストのないnav要素があります。 3つあります.1つをクリックすると、ウェブサイトに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よりもう1つ多くのdivに変更するとは思っていませんでしたが、代わりに何もしません。現在開いているタブをすべて非表示にするには、これをどのように追加しますか？

出典

2012-02-02 sbatson5

にDIV名前を保存することができますか？ – Niklas

今後の参考のため、jQueryを使用すると、 'toggle（）'（http://api.jquery.com/toggle/）も試してみることができます。 – summea

も、あなたがHTMLのaswellを貼り付けでし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

cssクラスを利用することで、このコードの構造を改善できます。まず、getElementsByClassNameを使用してすべてのナビアイテムを収集します。次に、トグルコードを指すクリックハンドラをアタッチします。

トグルコードでは、表示されている要素のクラスを追加し、古い要素のクラスを削除します。私はあなたの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を非表示にする

答えて

関連する問題