항상 고수님들께 신세 많이 지고있습니다, 감사합니다.
다른게 아니고 탭 메뉴를 강좌를 보며 만들고 있습니다. 위와 같은 모양새이고 검은색 밑줄 들어간게 선택된 상태입니다.
버튼을 눌러 탭을 넘기면 밑에 탭은 잘 넘어가는데, 탭을 넘겨도 위에 버튼이 하이라이트된게 사라지지가 않습니다 ㅠㅠ ( A탭 선택 상태에서 B탭으로 넘어가도 A탭 버튼에 계속 하이라이트가 들어가는 상태) 이 부분만 고치면 되는데 뭘 건들여야할지 잘 모르겠습니다. 한 번 봐주시면 감사하겠습니다...
+ 탭 속 내용물을 누르면 탭 자체가 사라지는 현상이... 나타납니다 이 부분에 대한 해결책이 있을까요?
HTML
Copy
<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>
스크립트
Copy
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
Copy
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개 / 댓글 4개
채택된 답변
+20 포인트
2년 전
Copy
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");
});
});답변에 대한 댓글 3개
2년 전
아 이제 정상작동이 되네요 감사합니다 ㅠㅠ 혹시 탭 안의 항목을 누르면 탭이 사라지는 것에 대해서는 해결방법이 있을까요?
2년 전
[code]
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");
});
});
[/code]
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");
});
});
[/code]
cuwaaang클래스명은 대충 예시로들겠습니다.
li 클릭 > li의 active 클래스 삭제 > 클릭한 li에만 active 클래스 다시부여
요정도로 이해하시고 코드 다시 살펴보시면될거같습니다.
안에 내용이삭제된다는건 remove 들어간 저곳때문인거같은데
removeclass, addclass 이걸로 쓰는게 나을거같은데
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.