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 구조가 잘못 되었습니다. 그래서 원하는데로 동작 안했던 것 같네요
<!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>
기존 스와이퍼 써야하는 부분이 있어서 스크립트 안에 이런식으로 같이 적었는데
그대로 다 복붙했는데 왜 안되는지 의문이네요 ..
html / css 도 바꼈습니다 확인해보셨나요
네네 css도 옮겻고 html은 그대로 긁어 복붙하니 div들만 안닫겨 있어서 그것만 닫아줬습니다..ㅜ
첨부터 스와이퍼라고 질문을 주신게 아니니 안되는거겠죵ㅜ 구조가 다르니
다시 복붙해서 실행하니 정상 작동되네요 html 문제엿던거 같아요 감사합니다!!
스크립트만 아래껄로 교체하세요
$(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")
})
})