javascript - クリック div の表示/非表示、希望: 一度に 1 つのアイテムを表示

Question

js を使用して表示/非表示の div を設定しましたが、一度に 1 つの div を表示する方法を理解するのに苦労しています。現在起こっていることは、元のリンクをもう一度クリックしてdivを閉じない限り、各divが表示されることです。

http://www.littlestoneacademy.com

Answer 1

まず、その必要性を理解しようとします。ブロックを表示し、リンクをクリックすると他のブロックを非表示にする必要があります。非表示にする必要があるものと表示する必要があるものに対して、属性を使用document.getElementByIdして設定するだけです。style.displaynoneblock

このようなJavaScriptを用意してください（必要に応じて変更してください）：

    <script type="text/javascript">
        function toggle(divName1,divName2,divName3){
            var div1=document.getElementById(""+divName1);
            div1.style.display="block";
            var div2=document.getElementById(""+divName2);
            div2.style.display="none";
            var div3=document.getElementById(""+divName3);
            div3.style.display="none";
        }
   </script>

そしてhtmlコード：

 <a href="#" onclick="toggle('div1','div2','div3');">DIV 1</a><div id="div1" style="display:none">hello1</div><br/>
 <a href="#" onclick="toggle('div2','div1','div3');">DIV 2</a><div id="div2" style="display:none">hello2</div><br/>
 <a href="#" onclick="toggle('div3','div2','div1');">DIV 3</a><div id="div3" style="display:none">hello3</div><br/>