active시 선택됨 표시 만들기

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
active시 선택됨 표시 만들기

QA

active시 선택됨 표시 만들기

답변 1

본문

안녕하세요

 

// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.

const tabItem = document.querySelectorAll(".tab_menu");

const tabContent = document.querySelectorAll(".tab_content");

 

tabItem.forEach((item, index) => {

item.addEventListener("click", (e) => {

e.preventDefault(); // a

 

tabContent.forEach((content) => {

content.classList.remove("active");

});

 

tabItem.forEach((content) => {

content.classList.remove("active");

});

 

tabItem[index].classList.add("active");

tabContent[index].classList.add("active");

});

});

 

tab active를 이렇게 만들었는데

tab 이 active 됬을때 

1893379372_1730720721.4094.png

안에

<span class="visually-hidden">선택됨</span>

이런식으로 선택됨을 표시해주고 싶은데

javascript 요소 추가를 해보려고 해도 잘 안됩니다.

도움 부탁드립니다.

 

항상 모자라서 여쭤보게 되는데
답변 남겨주셔서 감사합니다

이 질문에 댓글 쓰기 :

답변 1

다음 코드가 도움이 될지 모르겠습니다.

 

<style>
ul:has(> li.tab_menu) {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 50em;
}
ul > li.tab_menu {
    flex-grow: 1;
    text-align: center;
    padding: 0.5em 0;
    cursor: pointer;
    background-color: #ccc;
}
ul > li.tab_menu:hover, ul > li.tab_menu.active {
    background-color: #ddd;
}
ul:has(> li.tab_content) {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 50em;
    height: 10em;
}
ul > li.tab_content {
    position: absolute;
    color: blue;
    inset: 0;
    background-color: #eee;
    display: none;
}
.visually-hidden {
    display: none;
}
ul > li.tab_menu .visually-hidden {
    display: inline;
}
ul > li.active {
    display: block;
}
</style>
 
<ul>
    <li class="tab_menu"><a href="#tab1">menu-1</a></li>
    <li class="tab_menu"><a href="#tab2">menu-2</a></li>
    <li class="tab_menu"><a href="#tab3">menu-3</a></li>
    <li class="tab_menu"><a href="#tab4">menu-4</a></li>
</ul>
<ul>
    <li class="tab_content">content-1</li>
    <li class="tab_content">content-2</li>
    <li class="tab_content">content-3</li>
    <li class="tab_content">content-4</li>
</ul>
 
<script>
// add
const chosen = document.createElement('span');
chosen.className = 'visually-hidden';
chosen.innerHTML = '선택됨';
document.documentElement.appendChild(chosen);
 
// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.
const tabItem = document.querySelectorAll(".tab_menu");
const tabContent = document.querySelectorAll(".tab_content");
 
tabItem.forEach((item, index) => {
item.addEventListener("click", (e) => {
e.preventDefault(); // a
 
tabContent.forEach((content) => {
content.classList.remove("active");
});
 
tabItem.forEach((content) => {
content.classList.remove("active");
});
 
tabItem[index].classList.add("active");
tabContent[index].classList.add("active"); 
 
// add
tabItem[index].appendChild(chosen);
});
});
 
// add
if (tabItem[0] != null) {
    tabItem[0].dispatchEvent(new Event('click'));
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
이전 아이콘
다음 아이콘
전체 0
로딩중
© SIRSOFT
현재 페이지 제일 처음으로