탭 클릭시 해당하는 div 영역에 있는 내용 뿌려주는 jquery
class 로 정의하여 한 화면에 탭이 여러개여도 각각에 맞춰서 제어 할수 있도록 작업했답니다.
기존에는 각 탭마다 ID를 지정해서 이용했지만 지금은 각 탭에 동일한 class와 동일한 구조인 경우
한번만 정의해서 사용하고 있답니다.
제가 주로 사용하는 방법입니다.
실제 사용 예제는 AWS Management Console S3 에 올렸답니다. 소스보기 해서 가져가서 쓰시면 됩니다.
http://s3-ap-northeast-1.amazonaws.com/soyeontest/jquery/tab_class.html
|
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .tab ul li { width: 100px; float: left; background: #ffff99; text-align: center; } .tab ul li.on { background: #ffcccc; font-weight: bold; } .div_cont { clear: both; } .hidden { display: none; }
</style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ $(".tab > ul li").click(function(){ var now_tab = $(this).index();
$(this).parent().find("li").removeClass("on"); $(this).parent().parent().parent().find(".div_cont").addClass("hidden"); $(this).parent().find("li").eq(now_tab).addClass("on");
$(this).parent().parent().parent().find(".div_cont").eq(now_tab).removeClass("hidden"); });
});
</script>
<div class="tab_area1">
<div class="tab">
<ul> <li class="on"><a href="#X">tab1</a></li> <li><a href="#X">tab2</a></li> <li><a href="#X">tab3</a></li> <li><a href="#X">tab4</a></li> </ul> </div> <div class="div_cont"> tab1 </div> <div class="div_cont hidden"> tab2 </div> <div class="div_cont hidden"> tab3 </div> <div class="div_cont hidden"> tab4 </div> </div>
<div class="tab_area2">
<div class="tab">
<ul> <li class="on"><a href="#X">tab5</a></li> <li><a href="#X">tab6</a></li> <li><a href="#X">tab7</a></li> <li><a href="#X">tab8</a></li> </ul> </div> <div class="div_cont"> tab5 </div> <div class="div_cont hidden"> tab26 </div> <div class="div_cont hidden"> tab37 </div> <div class="div_cont hidden"> tab48 </div> </div>
</body> </html> |
'IT' 카테고리의 다른 글
| windows 8.1 에서 mysql Workbench 설치 (0) | 2015.06.10 |
|---|---|
| PHP unixtime 으로 남은 시간 계산 과 시분초로 표현 (2) | 2014.12.24 |
| 넥서스7 안드로이드 롤리팝 업데이트 이스터에그 게임 (1) | 2014.12.11 |
| AWS S3 Bucket 파일 업로드 후에 permission 오류 (0) | 2014.12.10 |
| jQuery DatePicker option 한글 표기와 특정일 선택 안되도록 셋팅 (0) | 2014.12.10 |
