탭 메뉴 구현 중 버튼 하이라이트가 사라지지 않는 건 채택완료
ZDZ
2년 전
조회 1,950
항상 고수님들께 신세 많이 지고있습니다, 감사합니다.
다른게 아니고 탭 메뉴를 강좌를 보며 만들고 있습니다. 위와 같은 모양새이고 검은색 밑줄 들어간게 선택된 상태입니다.
버튼을 눌러 탭을 넘기면 밑에 탭은 잘 넘어가는데, 탭을 넘겨도 위에 버튼이 하이라이트된게 사라지지가 않습니다 ㅠㅠ ( A탭 선택 상태에서 B탭으로 넘어가도 A탭 버튼에 계속 하이라이트가 들어가는 상태) 이 부분만 고치면 되는데 뭘 건들여야할지 잘 모르겠습니다. 한 번 봐주시면 감사하겠습니다...
+ 탭 속 내용물을 누르면 탭 자체가 사라지는 현상이... 나타납니다 이 부분에 대한 해결책이 있을까요?
HTML
</p>
<p> <section class="sec sec03"></p>
<p> <div class="shopping_bn"></p>
<p> <h3 class="hide-infomation">쇼핑몰</h3></p>
<p> <p>All Product</p></p>
<p> <div class="inner"></p>
<p> <ul class="AP_wr"></p>
<p> <li class="tab_list_wr"></p>
<p> <ul class="tab_list"></p>
<p> <li><button type="button" class="ap_tab is_on" data-list="1">A</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="2">B</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="3">C</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="4">D</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="5">E</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="6">F</button></li></p>
<p> <li><button type="button" class="ap_tab" data-list="7">G</button></li></p>
<p> </ul></p>
<p> </li></p>
<p> <li class="AP_tab is_active" data-order="1"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="2"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="3"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="4"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="5"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="6"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> <li class="AP_tab" data-order="7"></p>
<p> <div></p>
<p> 내용</p>
<p> </div></p>
<p> </li></p>
<p> </ul></p>
<p> </div></p>
<p> </div></p>
<p> </section></p>
<p>
스크립트
</p>
<p> const tab = document.querySelector(".AP_wr");</p>
<p> const tabListItem = document.querySelectorAll(".tab_list li");</p>
<p> const tabContent = document.querySelectorAll(".AP_tab");</p>
<p> const active = document.querySelector(".is_on");</p>
<p> const showing = document.querySelector(".is_active");</p>
<p> </p>
<p> tab.addEventListener("click", (e) => {</p>
<p> const ListOrder = e.target.dataset.list;</p>
<p> tabListItem.forEach(function (e) {</p>
<p> e.classList.remove("is_on");</p>
<p> });</p>
<p> e.target.classList.add("is_on");</p>
<p> tabContent.forEach(function (event) {</p>
<p> if (event.dataset.order == ListOrder) {</p>
<p> event.classList.add("is_active");</p>
<p> } else event.classList.remove("is_active");</p>
<p> });</p>
<p> });</p>
<p>
CSS
</p>
<p>section.sec03 .shopping_bn {height: 120vh;}</p>
<p>section.sec03 .shopping_bn > p {margin-bottom: 100px; font-size: 40px;font-weight: 600;text-align: center;}</p>
<p>section.sec03 .shopping_bn .sct_10 li.sct_li {height: 440px;}</p>
<p> </p>
<p>section.sec03 .AP_wr {position: relative;}</p>
<p>section.sec03 .AP_wr > .tab_list_wr {</p>
<p> position: absolute;</p>
<p> top: -65px;</p>
<p> left: 50%;</p>
<p> transform: translate(-50%, 0);</p>
<p>}</p>
<p>section.sec03 .AP_wr > .tab_list_wr > ul {display: flex;column-gap: 46px;}</p>
<p>section.sec03 .AP_wr > .tab_list_wr > ul button {background-color: transparent; border: 0; font-size: 16px; color: #222;}</p>
<p>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;}</p>
<p>
</p>
<p>section.sec03 .AP_wr li > div {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> left: 0;</p>
<p> width: 100%;</p>
<p>}</p>
<p>section.sec03 .AP_wr .AP_tab:not(:first-child) {opacity: 0; transition: all 0.5s;}</p>
<p>section.sec03 .AP_wr .is_active {opacity: 1 !important;}</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
</p>
<p> 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");
});
});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
Z
ZDZ
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]
Z
ZDZ
2년 전
정말 감사합니다!!!!!!!! ㅠㅠㅠㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인