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

tab이 제대로 작동하지 않아 문의드립니다 채택완료

몽글몽그리 1년 전 조회 932
답변 2
목록

<section class="ptr">

      <div class="upper">

        <span>Pattern Details</span>

        <h2></h2>

        <h5></h5>

      </div>

 

      <div class="tab3 pattern">

        <div class="tab-inner">

            <!-- 탭 영역 -->

            <ul class="round btn">

                <!-- 클릭하는 버튼영역 -->

                <li data-alt="tab1" class="active">큐빅</li>

                <li data-alt="tab2">젠</li>

                <li data-alt="tab3">그래픽</li>

            </ul>

 

            <div class="mt50 tabs">

                <!-- 탭내용이 들어가는 영역 -->

                <div id="tab1" class="active">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c1.jpg" alt="">

                      <p>KL BROWN + CHAMPAGNE</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c2.jpg" alt="">

                      <p>254 + CB BRONZE</p>

                    </div>

                  </div>

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c3.jpg" alt="">

                      <p>903 + CB BRONZE</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c4.jpg" alt="">

                      <p>922 + DW SILVER</p>

                    </div>

                    </div>

                  </div>

                </div>

                <div id="tab2">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/z1.jpg" alt="">

                      <p>229 + 매직골드</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/z2.jpg" alt="">

                      <p>MD-BLUE + 매직 그레이</p>

                    </div>

                  </div>

                  <div class="c-flex">

                      <div class="c-line">

                        <img src="<?php echo G5_THEME_URL?>/img/z3.jpg" alt="">

                        <p>922 + 매직골드</p>

                      </div>

                    </div>

                  </div>

                </div>

                <div id="tab3">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/g1.jpg" alt="">

                      <p>213 + LH 표준2안E</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/g2.jpg" alt="">

                      <p>922 + 701 GOLD</p>

                    </div>

                  </div>

                  <div class="c-flex">

                      <div class="c-line">

                        <img src="<?php echo G5_THEME_URL?>/img/g3.jpg" alt="">

                        <p>2254 + 야자수</p>

                      </div>

                    </div>

                  </div>

                </div>

            </div>  

        </div>

      </div>    

    </section>

 

 

아래 는 css 입니다

 

.tab3.pattern {background: #fff; padding: 0;}

.mt50.tabs {margin-top: 50px;}

.mt50.tabs div {height: auto;}

.mt50.tabs div img {width: 590px; height: 230px;}

.round.btn li {font-size: 1.5rem; font-weight: 500; color: #fff; width: 140px; height: 45px; background: #000; border-radius: 30px; line-height: 1.7; margin-right: 20px;}

.round.btn li.active, .round.btn li:hover {color: #000; background: #fff; border: 2px solid #000; }

.c-flex {display: flex; gap: 60px;}

.c-line {margin-bottom: 50px;}

.c-line p {font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 2.5;}

.tabs {margin-top: 85px;}

.tabs div{display: none; background-color: #fff; height: 310px; box-sizing: border-box; overflow: hidden;}

.tabs div.active{display: block;}

 

 

이부분 js입니다

 

$(document).ready(function(){

    // 버튼 active 추가 제거 해보기

    $('.round.btn li').click(function(){

        $(this).addClass('active');

        $(this).siblings().removeClass('active');

 

        // 탭메뉴 연결하기

        const result = $(this).attr('data-alt');

        // li에 있는 data-alt 값을 변수에 저장시킴

 

        $('.mt50.tabs div').removeClass('active');

        $(`#${result}`).addClass('active');

    });

 

    });

 

두번째 탭만 잘작동하고 첫번째와 세번째 탭은 심어둔 내용이 보이지 않고

아래로 빠져나오고 작동이 제대로 안되서 코드 어디에 문제가 있는지 봐주실수 있을까요 ㅜㅜㅜㅜ

 

 

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

답변 2개

채택된 답변
+20 포인트
미
미니님a Expert
1년 전

지금 보니 html 구조도 잘못 되었고 선택자도 잘못 되었네요

 

아래 풀 코드입니다. 직접 테스트 해봤습니다.

 

수정된 코드니깐 그대로 쓰셔요

 

닫는 div 구조가 잘못 되었습니다. 그래서 원하는데로 동작 안했던 것 같네요

 

 

 

</p>

<p><!DOCTYPE html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p>    <title>Document</title></p>

<p>    <style></p>

<p>        .tab3.pattern {background: #fff; padding: 0;}</p>

<p> </p>

<p>.mt50.tabs {margin-top: 50px;}</p>

<p> </p>

<p>.mt50.tabs div {height: auto;}</p>

<p> </p>

<p>.mt50.tabs div img {width: 590px; height: 230px;}</p>

<p> </p>

<p>.round.btn li {font-size: 1.5rem; font-weight: 500; color: #fff; width: 140px; height: 45px; background: #000; border-radius: 30px; line-height: 1.7; margin-right: 20px;}</p>

<p> </p>

<p>.round.btn li.active, .round.btn li:hover {color: #000; background: #fff; border: 2px solid #000; }</p>

<p> </p>

<p>.c-flex {display: flex; gap: 60px;}</p>

<p> </p>

<p>.c-line {margin-bottom: 50px;}</p>

<p> </p>

<p>.c-line p {font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 2.5;}</p>

<p> </p>

<p>.tabs {margin-top: 85px;}</p>

<p> </p>

<p>.tabs > div{display: none; background-color: #fff; height: 310px; box-sizing: border-box; overflow: hidden;}</p>

<p> </p>

<p>.tabs div.active{display: block;}</p>

<p>    </style></p>

<p>    <script src="<a href="https://code.jquery.com/jquery-3.6.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.6.0.min.js"></script></a></p>

<p>    <script></p>

<p>$(document).ready(function(){</p>

<p>$('.round.btn li').click(function(){</p>

<p>let i = $(this).index();</p>

<p> </p>

<p>$('.round.btn li').removeClass("active").eq(i).addClass("active")</p>

<p>$('.mt50.tabs > div').removeClass("active").eq(i).addClass("active")</p>

<p>})</p>

<p>})</p>

<p>    </script></p>

<p></head></p>

<p><body></p>

<p>    <section class="ptr"></p>

<p> </p>

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

<p> </p>

<p>          <span>Pattern Details</span></p>

<p> </p>

<p>          <h2></h2></p>

<p> </p>

<p>          <h5></h5></p>

<p> </p>

<p>        </div></p>

<p> </p>

<p>   </p>

<p> </p>

<p>        <div class="tab3 pattern"></p>

<p> </p>

<p>          <div class="tab-inner"></p>

<p> </p>

<p>              <!-- 탭 영역 --></p>

<p> </p>

<p>              <ul class="round btn"></p>

<p> </p>

<p>                  <!-- 클릭하는 버튼영역 --></p>

<p> </p>

<p>                  <li class="active">큐빅</li></p>

<p> </p>

<p>                  <li>젠</li></p>

<p> </p>

<p>                  <li>그래픽</li></p>

<p> </p>

<p>              </ul></p>

<p> </p>

<p>   </p>

<p> </p>

<p>              <div class="mt50 tabs"></p>

<p> </p>

<p>                  <!-- 탭내용이 들어가는 영역 --></p>

<p> </p>

<p>                  <div id="tab1" class="active"></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/c1.jpg" alt=""></p>

<p> </p>

<p>                        <p>KL BROWN + CHAMPAGNE</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/c2.jpg" alt=""></p>

<p> </p>

<p>                        <p>254 + CB BRONZE</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                    </div></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/c3.jpg" alt=""></p>

<p> </p>

<p>                        <p>903 + CB BRONZE</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/c4.jpg" alt=""></p>

<p> </p>

<p>                        <p>922 + DW SILVER</p></p>

<p> </p>

<p> </p>

<p>                       </p>

<p>                    </div></p>

<p>                    </div></p>

<p>                  </div></p>

<p> </p>

<p>                  <div id="tab2"></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/z1.jpg" alt=""></p>

<p> </p>

<p>                        <p>229 + 매직골드</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/z2.jpg" alt=""></p>

<p> </p>

<p>                        <p>MD-BLUE + 매직 그레이</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                    </div></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                        <div class="c-line"></p>

<p> </p>

<p>                          <img src="<?php echo G5_THEME_URL?>/img/z3.jpg" alt=""></p>

<p> </p>

<p>                          <p>922 + 매직골드</p></p>

<p> </p>

<p>                        </div></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                    </div></p>

<p> </p>

<p> </p>

<p>                  <div id="tab3"></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/g1.jpg" alt=""></p>

<p> </p>

<p>                        <p>213 + LH 표준2안E</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                      <div class="c-line"></p>

<p> </p>

<p>                        <img src="<?php echo G5_THEME_URL?>/img/g2.jpg" alt=""></p>

<p> </p>

<p>                        <p>922 + 701 GOLD</p></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                    </div></p>

<p> </p>

<p>                    <div class="c-flex"></p>

<p> </p>

<p>                        <div class="c-line"></p>

<p> </p>

<p>                          <img src="<?php echo G5_THEME_URL?>/img/g3.jpg" alt=""></p>

<p> </p>

<p>                          <p>2254 + 야자수</p></p>

<p> </p>

<p>                        </div></p>

<p> </p>

<p>                      </div></p>

<p> </p>

<p>                    </div></p>

<p> </p>

<p> </p>

<p> </p>

<p>      </section></p>

<p> </p>

<p>   </p>

<p></body></p>

<p></html></p>

<p>

 

 

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

답변에 대한 댓글 6개

�
몽글몽그리
1년 전
감사합니다... 지금 변경해보니 버튼은 잘 돌아가고 구조는 맞게 나오는데 탭 누르면 해당하는 부분들이 안나오네요... ㅠㅠㅠㅠ
�
몽글몽그리
1년 전
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},


});


$(document).ready(function(){
$('.round.btn li').click(function(){
let i = $(this).index();

$('.round.btn li').removeClass("active").eq(i).addClass("active")
$('.mt50.tabs > div').removeClass("active").eq(i).addClass("active")
})
});

</script>

기존 스와이퍼 써야하는 부분이 있어서 스크립트 안에 이런식으로 같이 적었는데
그대로 다 복붙했는데 왜 안되는지 의문이네요 ..
�
미니님a
1년 전
html / css 도 바꼈습니다 확인해보셨나요
�
몽글몽그리
1년 전
네네 css도 옮겻고 html은 그대로 긁어 복붙하니 div들만 안닫겨 있어서 그것만 닫아줬습니다..ㅜ
�
미니님a
1년 전
첨부터 스와이퍼라고 질문을 주신게 아니니 안되는거겠죵ㅜ 구조가 다르니
�
몽글몽그리
1년 전
다시 복붙해서 실행하니 정상 작동되네요 html 문제엿던거 같아요 감사합니다!!

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

미
미니님a Expert
1년 전

스크립트만 아래껄로 교체하세요

</p>

<p>$(document).ready(function(){</p>

<p>$('.round.btn li').click(function(){</p>

<p>let i = $(this).index();</p>

<p> </p>

<p>$('.round.btn li').removeClass("active").eq(i).addClass("active")</p>

<p>$('.mt50.tab > div').removeClass("active").eq(i).addClass("active")</p>

<p>})</p>

<p>})</p>

<p>

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

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

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

로그인