원 클릭 만들기 및 도움말 링크 만들기에 대한 도움이 필요합니다.

Question

페이지에 몇 개의 레이어를 만들고 한 번의 클릭으로 레이어 사이를 전환하고 싶습니다.

아이디어가 있으십니까?

Answer 1

당신이 JQuery와 사용하지 않는 경우 :

document.getElementById('name').style.display = "none"; 
document.getElementById('name').style.display = ""; //show 

Answer 2

z-index가 요소의 수직 위치를 정의하는 CSS 속성입니다. 가장 높은 숫자가 z-index 인 요소가 위에 있습니다. 이것을 사용하여 레이어를 만들 수 있습니다.

그런 다음, 당신의 레이어 버튼에 대한 click 이벤트를 생성하고 z-index 변경 :

document.getElementById('layer1').style.zIndex = '10' 

당신에 대한 탭을 얘기하는 경우, jarrett's answer가 볼 수있는 것이어야한다.

Answer 3

"클릭"이벤트에 적용하여 jquery 및 tooggleClass() 함수를 사용할 수 있습니다. 예를 들어 : 레이어의

$('#button').click(function() { 
    $('#layer1').toggleClass('classToShow'); 
    $('#layer2').toggleClass('classToShow'); 
    $('#layer3').toggleClass('classToShow'); 
}); 

그리고 시작에 하나의

클래스 "classTShow"을 가지고있다.

Answer 4

jQuery를 사용합니다.

페이지에서 요소를 선택하고 쉽게 표시 여부를 제어 할 수 있습니다.

HTML :

<div class="layer" id="layer1"> 
stuff in here for layer 1 
</div> 
<div class="layer" id="layer2" style="display:none"> 
stuff in here for layer 2 
</div> 
<p id="button">click me</p> 

jQuery를 :이 코드는 사용자가 ID를 button으로 p을 클릭 할 때마다 layer 클래스와 함께이 개 된 div의 가시성을 전환됩니다

$('#button').click(function(){ 
    $('.layer').toggle(); 
}); 

.