탭메뉴 안에 탭메뉴 질문드립니다 ㅠㅠ...
본문
여섯개의 1dep탭을 클릭하면 각각 컨텐츠가 보여집니다.
OOOOOO
ㅣ
OO
여기서 1dep탭버튼의 첫번째탭 안에만 2dep탭이 두개 존재하는 상황입니다.
이런 형태로 했는데 잘 구현이 되는줄 알았더니 어째서인지 1dep탭 안의 두번째 탭을 클릭하고나면
1dep탭들은 클릭해봐도 그안의 컨텐츠들이 안보입니다...
자바스크립트를 이렇게 했는데 뭔가 충돌이 있는걸까요 ㅠㅠ
$(".p6tab > ul > li").click(function () {
var num = $(".p6tab > ul > li").index(this);
$(".p6con > div").removeClass('on');
$(".p6con > div").eq(num).addClass('on');
$(".p6con > div").eq(num).addClass('num'+num);
$(".p6tab > ul > li").removeClass('on');
$(this).addClass('on')
});
// tab in tab
$(".product4crop > li").click(function () {
var num = $(".product4crop > li").index(this);
$(".product6Tab > div").removeClass('on');
$(".product6Tab > div").eq(num).addClass('on');
$(".product4crop > li").removeClass('on');
$(this).addClass('on')
});
답변 4
html소스도 기재부탁드립니다.
넵!!
!-->
<div class="product4wrap">
<div class="product4">
<ul class="product4crop clearboth">
<li class="p6menu" data-tab="p6-1">
</li>
<li class="p6menu" data-tab="p6-2">
</li>
<li class="p6menu" data-tab="p6-3">
</li>
<li class="p6menu" data-tab="p6-4">
</li>
<li class="p6menu" data-tab="p6-5">
</li>
<li class="p6menu" data-tab="p6-6">
</li>
</ul>
<!-- con1 -->
<div class="product6Tab">
<div id="p6-1" class="on">
<div class="p6tab">
<ul class="clearboth">
<li data-tab="p6-1-1" class="on"></li>
<li data-tab="p6-1-2"></li>
</ul>
<div class="p6con">
<div id="p6-1-1" class="on"></div>
<div id="p6-1-2"></div>
</div>
</div>
</div>
</div>
<!-- con1끝 -->
<!-- con2 -->
<div class="product6Tab">
<div id="p6-2"></div>
</div>
<!-- con2끝 -->
<!-- con3 -->
<div class="product6Tab">
<div id="p6-3"></div>
</div>
<!-- con3끝 -->
<!-- con4 -->
<div class="product6Tab">
<div id="p6-4"></div>
</div>
<!-- con4끝 -->
<!-- con5 -->
<div class="product6Tab">
<div id="p6-5"></div>
</div>
<!-- con5끝 -->
<!-- con6 -->
<div class="product6Tab">
<div id="p6-6"></div>
</div>
<!-- con6끝 -->
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.