AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전 목록 다음
채택완료

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

몽몽글몽그리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 16:56:04 1,329

<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개 / 댓글 6개

채택된 답변
+20 포인트
미미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 17:17:58

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

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

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

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

978180634_1715242670.6454.gif

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

답변에 대한 댓글 6개

몽글몽그리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 17:56:17
감사합니다... 지금 변경해보니 버튼은 잘 돌아가고 구조는 맞게 나오는데 탭 누르면 해당하는 부분들이 안나오네요... ㅠㅠㅠㅠ
몽글몽그리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 18:01:02
<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
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 18:08:26
html / css 도 바꼈습니다 확인해보셨나요
몽글몽그리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 18:16:46
네네 css도 옮겻고 html은 그대로 긁어 복붙하니 div들만 안닫겨 있어서 그것만 닫아줬습니다..ㅜ
미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 18:46:55
첨부터 스와이퍼라고 질문을 주신게 아니니 안되는거겠죵ㅜ 구조가 다르니
몽글몽그리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-10 (금) 11:33:34
다시 복붙해서 실행하니 정상 작동되네요 html 문제엿던거 같아요 감사합니다!!
미미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 2024-05-09 (목) 17:06:04

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

Copy 
$(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")

})

})

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