active시 선택됨 표시 만들기 채택완료
안녕하세요
// 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 됬을때
안에
<span class="visually-hidden">선택됨</span>
이런식으로 선택됨을 표시해주고 싶은데
javascript 요소 추가를 해보려고 해도 잘 안됩니다.
도움 부탁드립니다.
항상 모자라서 여쭤보게 되는데
답변 남겨주셔서 감사합니다
답변 1개
다음 코드가 도움이 될지 모르겠습니다.
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;
}
menu-1
menu-2
menu-3
menu-4
content-1
content-2
content-3
content-4
// 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'));
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인