탭메뉴 안에 탭메뉴 질문드립니다 ㅠㅠ...
본문
여섯개의 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
잘보입니다 ....
똑같이 했는데 왜그럴까요 ㅠㅠ.....
혹시 자바스크립트도 저와 동일하게 하셨을까요...ㅠ?
http://goldweb04.cafe24.com/bbs/content.php?co_id=product6
링크 보시면 증상이 나타납니다 흑..ㅠ
태그순서가 맞지않습니다
예시입니다.
<!-- con1 -->
<div class="product6Tab">
<div id="p6-1" class="on">
<div class="p6tab">
<ul class="clearboth">
<li data-tab="p6-1-1" class="on">1-1</li>
<li data-tab="p6-1-2">1-2</li>
</ul>
<div class="p6con">
<div id="p6-1-1" class="on">1-1-1</div>
<div id="p6-1-2">1-2-2</div>
</div>
</div>
</div>
</div>
<!-- con1끝 -->
<!-- con2 -->
<div class="product6Tab">
<div id="p6-2">
<div class="p6tab">
<ul class="clearboth">
<li data-tab="p6-2-1" class="on">2-1</li>
<li data-tab="p6-2-2">2-2</li>
</ul>
<div class="p6con">
<div id="p6-2-1" class="on">2-1-1</div>
<div id="p6-2-2">2-2-2</div>
</div>
</div>
</div>
</div>
구조가 중요한데 자바스크립트만 계속 보고 있었어요 ㅠㅠ
감사합니다!!!!
html소스도 기재부탁드립니다.
네!!
css도부탁해요.
코드가 정신없는점 죄송합니다 ㅠㅠ
글쓰기로는 안써지네요 ㅠㅠ
.product4wrap {
width: 100%;
position: relative;
}
.product4 {
width: 1200px;
margin: 0 auto;
}
.product4crop {
padding: 80px 0;
}
.product4crop > li {
width: 15.4%;
float: left;
margin-right:1.52%;
padding: 40px 0;
cursor: pointer;
border: 0.5px solid #e6e6e6;
box-sizing: border-box;
transition: all 0.3s;
background: #fff;
box-shadow: 0 3px 6px rgb(0 0 0 / 7%);
}
.product4crop > li:last-child {
margin-right:0;
background:
}
.product4crop > li.on {
transition: all 0.3s;
background: #007fca;
color: white;
}
.p6menu > div {
margin: 0 auto;
border-radius: 50%;
background: #000;
width: 115px;
height: 115px;
padding-bottom: 40px;
border: 1px solid #e5e5e5;
box-sizing: border-box;
transition: all 0.3s;
}
.product6Tab > div {
display: none;
}
.product6Tab > div.on {
display: block;
}
.p6tab {
width: 100%;
}
.p6tab ul {
padding-bottom: 50px;
}
.p6tab ul li {
width: 50%;
float: left;
padding: 20px 0;
border-bottom: 0.5px solid #dcdcdc;
display: block;
text-align: center;
font-size: 16px;
font-weight: 300;
letter-spacing: -0.5px;
color: #a5a5a5;
cursor: pointer;
}
.p6tab ul li.on {
border-bottom: 2px solid #12a3e2;
color: #000;
font-weight: 400;
}
.p6con > div {
width: 100%;
display: none;
}
.p6con > div.on {
display: block;
}
.product4Tabcon1Img {
width: 100%;
padding: 0 0 50px;
position: relative;
}
.product4Tabcon1Img img {
display: block;
margin: 0 auto;
}
넵!!
<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>
잘보입니다.
이 상태에서 1dep에 있는 다른 탭들을 클릭해보면 그 탭들의 컨텐츠가 보이질않습니다 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.