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
다음 코드가 도움이 될지 모르겠습니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.