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

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

QA

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

본문

<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

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

 

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

 

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

 

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

 

 

978180634_1715242670.6454.gif

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .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;}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
$(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>
</head>
<body>
    <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 class="active">큐빅</li>
 
                  <li>젠</li>
 
                  <li>그래픽</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 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 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>
 
 
 
      </section>
 
   
</body>
</html>

 

 

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

기존 스와이퍼 써야하는 부분이 있어서 스크립트 안에 이런식으로 같이 적었는데
그대로 다 복붙했는데 왜 안되는지 의문이네요 ..

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


$(document).ready(function(){
$('.round.btn li').click(function(){
let i = $(this).index();
 
$('.round.btn li').removeClass("active").eq(i).addClass("active")
$('.mt50.tab > div').removeClass("active").eq(i).addClass("active")
})
})
답변을 작성하시기 전에 로그인 해주세요.
전체 126,625
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT