버튼과 같은 이름의 레이어 띄우기 페이지 새로고침

버튼을 클릭해보세요.

레이어 1내용 닫기
레이어 2내용 닫기
레이어 3내용 닫기

html

$(document).ready(function(){
$('.layer').click(function(){
var layer_nm = $(this).attr('data-num');
$('.layer_comm').hide();
$('.'+layer_nm).show();
});
});

css

.layer_comm{position:absolute;top:0;left:0;display:none}

html

<button class="layer" data-num="layer1">layer1</button>
<button href=/study/jquery/"#" class="layer" data-num="layer2">layer2</button>
<button href="#" class="layer" data-num="layer3">layer3</button>

레이어와 버튼스타일은 사이트에 맞게 꾸며주세요.
핵심은 버튼 data-num을 클릭시 레이어에 동일 class명이 보여지는것입니다. data-num명은 다른것으로 변경해도 됩니다. 대신 스크립트도 수정해주셔야합니다.

해당 팁이 유용했다면,
눌러주세요.