[ JQUERY ] [JQuery] Tab 메뉴(기능편)
작성일 20-03-03 20:41
페이지 정보
작성자최고관리자 조회 264회 댓글 0건본문
<style>
.tab_btn ul li{display: inline-block; padding: 0 10px;}
.tab_contents{margin-top: 20px; padding: 0 10px;}
.tab_contents > div{display: none;}
.tab_contents > div:first-child{display: block;}
</style>
<div class="tab_btn">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
</div>
<div class="tab_contents">
<div>Tab-content-1</div>
<div>Tab-content-2</div>
<div>Tab-content-3</div>
</div>
<script>
$(document).ready(function(){
var tabBtn = $(".tab_btn > ul > li"), //탭 버튼
tabCont = $(".tab_contents > div"), //탭 내용
tabBtn_num; //클릭이벤트 발생시 index를 넣을 변수
tabBtn.click(function(){
tabBtn_num = $(this).index(); //클릭한 탭버튼의 번째수(index)를 가져옴
tabCont.eq(tabBtn_num).show().siblings().hide(); //클릭한 탭버튼의 번째수와 동일한 내용 보여주고 다른 내용들은 숨김
});
});
</script>
댓글목록
등록된 댓글이 없습니다.