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>
!-->
스크립트만 아래껄로 교체하세요
$(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")
})
})