SIR
이전 목록 다음
채택완료

탭메뉴 안에 탭메뉴 질문드립니다 ㅠㅠ...

Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 1,900

여섯개의 1dep탭을 클릭하면 각각 컨텐츠가 보여집니다.

OOOOOO

ㅣ

OO

여기서 1dep탭버튼의 첫번째탭 안에만 2dep탭이 두개 존재하는 상황입니다.

 

이런 형태로 했는데 잘 구현이 되는줄 알았더니 어째서인지 1dep탭 안의 두번째 탭을 클릭하고나면

1dep탭들은 클릭해봐도 그안의 컨텐츠들이 안보입니다...

 

자바스크립트를 이렇게 했는데 뭔가 충돌이 있는걸까요 ㅠㅠ

 

 

Copy 
$(".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')
    });


 

javascript 탭메뉴
|

답변 4개 / 댓글 7개

채택된 답변
+20 포인트
핑크빈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

thumb-981270639_1622697393.9328_730x322.png잘보입니다 ....

답변에 대한 댓글 3개

Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
똑같이 했는데 왜그럴까요 ㅠㅠ.....
혹시 자바스크립트도 저와 동일하게 하셨을까요...ㅠ?
http://goldweb04.cafe24.com/bbs/content.php?co_id=product6
링크 보시면 증상이 나타납니다 흑..ㅠ
Phillips
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
태그순서가 맞지않습니다
예시입니다.
[code]
<!-- 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>
[/code]
Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
구조가 중요한데 자바스크립트만 계속 보고 있었어요 ㅠㅠ
감사합니다!!!!
핑크빈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

잘보입니다.thumb-981270639_1622696601.1669_730x185.png

답변에 대한 댓글 1개

Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
이 상태에서 1dep에 있는 다른 탭들을 클릭해보면 그 탭들의 컨텐츠가 보이질않습니다 ㅠㅠ
Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

넵!!

Copy 
<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>
핑크빈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

html소스도 기재부탁드립니다.

답변에 대한 댓글 3개

Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
네!!
Phillips
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
css도부탁해요.
Mihamiya
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
코드가 정신없는점 죄송합니다 ㅠㅠ
글쓰기로는 안써지네요 ㅠㅠ

[code]

.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;
}


[/code]

답변을 작성하려면 로그인이 필요합니다.