<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div>
<button class='one'>ONE</button>
<button class='two'>TWO</button>
<button class='three'>THREE</button>
</div>
<div class='sub_one'>
<button class='sub_one_1'>SUB_ONE_1</button>
<button class='sub_one_2'>SUB_ONE_2</button>
<button class='sub_one_3'>SUB_ONE_3</button>
<button class='sub_one_4'>SUB_ONE_4</button>
</div>
<div class='sub_two'>
<button class='sub_two_1'>SUB_TWO_1</button>
<button class='sub_two_2'>SUB_TWO_2</button>
<button class='sub_two_3'>SUB_TWO_3</button>
</div>
<div class='sub_three'>
<button class='sub_three_1'>SUB_THREE_1</button>
<button class='sub_three_2'>SUB_THREE_2</button>
<button class='sub_three_3'>SUB_THREE_3</button>
</div>
<script>
$("body > div > button").click(function() { // or "body > div > :button"
/*
$("body > div[class^='sub_']").hide();
$("body > div[class$='" + $(this).attr('class') + "']").show();
*/
var idx = $("body > div:first > :button").index($(this));
$("body > div:not(:first)").hide();
// $("body > div:not(:first)").eq(idx).show();
$("body > div:not(:first):eq(" + idx + ")").show();
});
</script>
</body>
</html>
'작업 > 작업소스' 카테고리의 다른 글
| [jquery] jquery 사용시 prototype.js 충돌 해결 (0) | 2014.07.18 |
|---|---|
| font 폰트 스타일 나눔고딕 돋움 (0) | 2014.06.09 |
| 구글지도, 네이버 지도, 다음지도 (0) | 2014.06.09 |
| 앱이나 모바일웹에서 카카오톡,카카오스토리로 메시지보내기 (0) | 2014.05.13 |
