<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<div class="brandShop">
<h2>브랜드샵</h2>
<ul>
<li id="brand_tab1" class="port_back">탭1</li>
<li id="brand_tab2">탭2</li>
<li id="brand_tab3">탭3</li>
</ul>
<div class="rf tab_sub1">
탭1 내용이들어감
</div>
<div class="rm tab_sub2">
탭2 내용이 들어감
</div>
<div class="rm tab_sub3">
탭3 내용이 들어감
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#brand_tab1").click(function() {
$(".tab_sub1").show();
$(".tab_sub2,.tab_sub3").hide();
$("#brand_tab1").addClass("port_back");
$("#brand_tab2,#brand_tab3").removeClass("port_back");
});
$("#brand_tab2").click(function() {
$(".tab_sub2").show();
$(".tab_sub1,.tab_sub3").hide();
$("#tab_menu2").addClass("port_back");
$("#brand_tab1,#brand_tab3").removeClass("port_back");
});
$("#brand_tab3").click(function() {
$(".tab_sub3").show();
$(".tab_sub1,.tab_sub2").hide();
$("#brand_tab3").addClass("port_back");
$("#brand_tab1,#brand_tab2").removeClass("port_back");
});
});
</script>
'코딩 > 제이쿼리' 카테고리의 다른 글
벽돌컨텐츠, 스와이프 배너 (1) | 2015.11.30 |
---|---|
[제이쿼리] 스크롤탑 scrollTop (0) | 2015.09.08 |
[제이쿼리] 제이쿼리 모바일 참고 사이트 (0) | 2014.09.03 |
[제이쿼리] 스타일 중복으로 넣을때 소스, 중복스타일, 테이블선택자 (0) | 2014.09.01 |
[제이쿼리] 드롭다운메뉴 (0) | 2014.08.13 |