탭 메뉴 구현 중 버튼 하이라이트가 사라지지 않는 건
본문
항상 고수님들께 신세 많이 지고있습니다, 감사합니다.
다른게 아니고 탭 메뉴를 강좌를 보며 만들고 있습니다. 위와 같은 모양새이고 검은색 밑줄 들어간게 선택된 상태입니다.
버튼을 눌러 탭을 넘기면 밑에 탭은 잘 넘어가는데, 탭을 넘겨도 위에 버튼이 하이라이트된게 사라지지가 않습니다 ㅠㅠ ( A탭 선택 상태에서 B탭으로 넘어가도 A탭 버튼에 계속 하이라이트가 들어가는 상태) 이 부분만 고치면 되는데 뭘 건들여야할지 잘 모르겠습니다. 한 번 봐주시면 감사하겠습니다...
+ 탭 속 내용물을 누르면 탭 자체가 사라지는 현상이... 나타납니다 이 부분에 대한 해결책이 있을까요?
HTML
<section class="sec sec03">
<div class="shopping_bn">
<h3 class="hide-infomation">쇼핑몰</h3>
<p>All Product</p>
<div class="inner">
<ul class="AP_wr">
<li class="tab_list_wr">
<ul class="tab_list">
<li><button type="button" class="ap_tab is_on" data-list="1">A</button></li>
<li><button type="button" class="ap_tab" data-list="2">B</button></li>
<li><button type="button" class="ap_tab" data-list="3">C</button></li>
<li><button type="button" class="ap_tab" data-list="4">D</button></li>
<li><button type="button" class="ap_tab" data-list="5">E</button></li>
<li><button type="button" class="ap_tab" data-list="6">F</button></li>
<li><button type="button" class="ap_tab" data-list="7">G</button></li>
</ul>
</li>
<li class="AP_tab is_active" data-order="1">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="2">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="3">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="4">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="5">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="6">
<div>
내용
</div>
</li>
<li class="AP_tab" data-order="7">
<div>
내용
</div>
</li>
</ul>
</div>
</div>
</section>
스크립트
const tab = document.querySelector(".AP_wr");
const tabListItem = document.querySelectorAll(".tab_list li");
const tabContent = document.querySelectorAll(".AP_tab");
const active = document.querySelector(".is_on");
const showing = document.querySelector(".is_active");
tab.addEventListener("click", (e) => {
const ListOrder = e.target.dataset.list;
tabListItem.forEach(function (e) {
e.classList.remove("is_on");
});
e.target.classList.add("is_on");
tabContent.forEach(function (event) {
if (event.dataset.order == ListOrder) {
event.classList.add("is_active");
} else event.classList.remove("is_active");
});
});
CSS
section.sec03 .shopping_bn {height: 120vh;}
section.sec03 .shopping_bn > p {margin-bottom: 100px; font-size: 40px;font-weight: 600;text-align: center;}
section.sec03 .shopping_bn .sct_10 li.sct_li {height: 440px;}
section.sec03 .AP_wr {position: relative;}
section.sec03 .AP_wr > .tab_list_wr {
position: absolute;
top: -65px;
left: 50%;
transform: translate(-50%, 0);
}
section.sec03 .AP_wr > .tab_list_wr > ul {display: flex;column-gap: 46px;}
section.sec03 .AP_wr > .tab_list_wr > ul button {background-color: transparent; border: 0; font-size: 16px; color: #222;}
section.sec03 .AP_wr > .tab_list_wr > ul button.is_on::after {content: ""; display: block; margin-top: 10px; width: 100%; height: 2px; background-color: #000;}
section.sec03 .AP_wr li > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
section.sec03 .AP_wr .AP_tab:not(:first-child) {opacity: 0; transition: all 0.5s;}
section.sec03 .AP_wr .is_active {opacity: 1 !important;}
답변 2
const tab = document.querySelector(".AP_wr");
const tabListItem = document.querySelectorAll(".tab_list li");
const tabContent = document.querySelectorAll(".AP_tab");
const active = document.querySelector(".is_on");
const showing = document.querySelector(".is_active");
tab.addEventListener("click", (e) => {
const ListOrder = e.target.dataset.list;
tabListItem.forEach(function (e) {
// e.classList.remove("is_on");
e.firstChild.classList.remove("is_on");
});
e.target.classList.add("is_on");
tabContent.forEach(function (event) {
if (event.dataset.order == ListOrder) {
event.classList.add("is_active");
} else event.classList.remove("is_active");
});
});
아 이제 정상작동이 되네요 감사합니다 ㅠㅠ 혹시 탭 안의 항목을 누르면 탭이 사라지는 것에 대해서는 해결방법이 있을까요?
const tab = document.querySelector(".AP_wr");
const tabListItem = document.querySelectorAll(".tab_list li");
const tabContent = document.querySelectorAll(".AP_tab");
const active = document.querySelector(".is_on");
const showing = document.querySelector(".is_active");
tab.addEventListener("click", (e) => {
const ListOrder = e.target.dataset.list;
if (ListOrder === undefined) {
return;
}
tabListItem.forEach(function (e) {
// e.classList.remove("is_on");
e.firstChild.classList.remove("is_on");
});
e.target.classList.add("is_on");
tabContent.forEach(function (event) {
if (event.dataset.order == ListOrder) {
event.classList.add("is_active");
} else event.classList.remove("is_active");
});
});
정말 감사합니다!!!!!!!! ㅠㅠㅠㅠㅠㅠ
클래스명은 대충 예시로들겠습니다.
li 클릭 > li의 active 클래스 삭제 > 클릭한 li에만 active 클래스 다시부여
요정도로 이해하시고 코드 다시 살펴보시면될거같습니다.
안에 내용이삭제된다는건 remove 들어간 저곳때문인거같은데
removeclass, addclass 이걸로 쓰는게 나을거같은데
removeClass와 addClass로 바꾸니 이상하게 작동을 안하더라구요..ㅠ
답변을 작성하시기 전에 로그인 해주세요.
