표시/숨기기 div를 클릭하십시오. 한 번에 하나의 항목 만 표시됩니다.

Question

js와 함께 표시/숨기기 div를 설정했으며 한 번에 하나의 div를 표시하는 방법을 찾는 데 어려움을 겪고 있습니다. 현재 무슨 일이 일어나고 있는지, div를 닫으려면 다시 원래 링크를 클릭하지 않으면 각 div가 표시됩니다.

http://www.littlestoneacademy.com

Answer 1

첫째 필요성을 이해하려고합니다. 필요는 블록을 표시하고 링크 클릭시 다른 블록을 숨기는 것입니다. document.getElementById을 사용하고 style.display 속성을 숨길 필요가있는 사용자의 경우 none, 표시해야하는 사용자의 경우 block으로 설정하면됩니다.

다소 같은 자바 스크립트 (필요에 따라 변경)을 가지고 :

<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/> 

Answer 2

:

을

<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> 
<style type="text/css"> 
.divInfo { 
    display:none; 
    border:1px solid red; 
    height:200px; 
    width:200px; 
} 
</style> 

그리고 html 코드 :

<table width=100%> 
    <tr> 
    <td> 
     <a href="#" onclick="toggle('div1','div2','div3');">DIV 1</a><br/> 
     <a href="#" onclick="toggle('div2','div1','div3');">DIV 2</a><br/> 
     <a href="#" onclick="toggle('div3','div2','div1');">DIV 3</a> 
    </td> 
    <td> 
     <div class="divInfo" id="div1">Div 1 Information</div> 
     <div class="divInfo" id="div2">Div 2 Information</div> 
     <div class="divInfo" id="div3">Div 3 Information</div> 
    </td> 
    </tr> 
</table> 

Answer 3

는 개인적으로 돌출 자바 스크립트이며 링크를 클릭 evertime 단지 모든 자바 스크립트가

문서

의 하단에있는 한 장소와 장소에 코드 줄을 사용하는 모든 인라인 이벤트 핸들러를 제거 할 그것은 사업부와 링크를 연결 패널의 모든 어린이 div의 후 바로 이벤트 핸들러가

var x = document.getElementsByTagName('ul'); 
var panel = document.getElementById('panel'); 
var ul = document.getElementsByTagName('ul')[1] 
var lis = ul.children 
for (i=0; i<lis.length; i++) { 
lis[i].addEventListener('click', function (event) { 
    var toggleId = "toggle" 
    var id = event.target.id; 
    var cutID = id.slice(7); 
    toggleId = toggleId + cutID 
    var panelChildren = panel.children 
    for (j=0; j<panelChildren.length; j++) { 
     panelChildren[j].style.display = "none" 
    } 
    document.getElementById(toggleId).style.display = "block" 

}, false) 
}