테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

탭메뉴 안에 탭메뉴 질문드립니다 ㅠㅠ... 채택완료

Mihamiya 4년 전 조회 1,816
답변 4
목록

여섯개의 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')

    });

 

#javascript #탭메뉴
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
핑크빈
핑크빈
4년 전

잘보입니다 ....

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

M
Mihamiya
4년 전
똑같이 했는데 왜그럴까요 ㅠㅠ.....
혹시 자바스크립트도 저와 동일하게 하셨을까요...ㅠ?
http://goldweb04.cafe24.com/bbs/content.php?co_id=product6
링크 보시면 증상이 나타납니다 흑..ㅠ
P
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]
M
Mihamiya
4년 전
구조가 중요한데 자바스크립트만 계속 보고 있었어요 ㅠㅠ
감사합니다!!!!

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

핑크빈
핑크빈
4년 전

잘보입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
Mihamiya
4년 전
이 상태에서 1dep에 있는 다른 탭들을 클릭해보면 그 탭들의 컨텐츠가 보이질않습니다 ㅠㅠ

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

Mihamiya
Mihamiya
4년 전

넵!! 

</p>

<p>

<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></p>

<p>    

    <!-- con1 -->

    <div class="product6Tab">

      <div id="p6-1" class="on"></p>

<p>        <div class="p6tab"></p>

<p>          <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></p>

<p>            <div id="p6-1-2"></div>

          </div></p>

<p>        </div></p>

<p>      </div>

    </div>

    <!-- con1끝 -->

    </p>

<p>    <!-- con2 -->

    <div class="product6Tab">

      <div id="p6-2"></div>

    </div>

    <!-- con2끝 --></p>

<p>    <!-- con3 -->

    <div class="product6Tab">

      <div id="p6-3"></div>

    </div>

    <!-- con3끝 --></p>

<p>

    <!-- con4 -->

    <div class="product6Tab">

      <div id="p6-4"></div>

    </div>

    <!-- con4끝 --></p>

<p>

    <!-- con5 -->

    <div class="product6Tab">

      <div id="p6-5"></div>

    </div>    

    <!-- con5끝 --></p>

<p>

    <!-- con6 -->

    <div class="product6Tab">

      <div id="p6-6"></div>

    </div>

    <!-- con6끝 --></p>

<p>

</div>

</div></p>

<p>

로그인 후 평가할 수 있습니다

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

핑크빈
핑크빈
4년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

M
Mihamiya
4년 전
네!!
P
Phillips
4년 전
css도부탁해요.
M
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]

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

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

로그인