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 됬을때
http://sir.kr/data/editor/2411/1893379372_1730720721.4094.png" width="240" />
안에
<span class="visually-hidden">선택됨</span>
이런식으로 선택됨을 표시해주고 싶은데
javascript 요소 추가를 해보려고 해도 잘 안됩니다.
도움 부탁드립니다.
항상 모자라서 여쭤보게 되는데
답변 남겨주셔서 감사합니다
답변 1개
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><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;
}</p>
<p>.visually-hidden {
display: none;
}
ul > li.tab_menu .visually-hidden {
display: inline;
}
ul > li.active {
display: block;
}
</style></p>
<p> </p>
<p><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></p>
<p> </p>
<p><script></p>
<p>// add
const chosen = document.createElement('span');
chosen.className = 'visually-hidden';
chosen.innerHTML = '선택됨';
document.documentElement.appendChild(chosen);</p>
<p> </p>
<p>// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.</p>
<p>const tabItem = document.querySelectorAll(".tab_menu");</p>
<p>const tabContent = document.querySelectorAll(".tab_content");</p>
<p> </p>
<p>tabItem.forEach((item, index) => {</p>
<p>item.addEventListener("click", (e) => {</p>
<p>e.preventDefault(); // a</p>
<p> </p>
<p>tabContent.forEach((content) => {</p>
<p>content.classList.remove("active");</p>
<p>});</p>
<p> </p>
<p>tabItem.forEach((content) => {</p>
<p>content.classList.remove("active");</p>
<p>});</p>
<p> </p>
<p>tabItem[index].classList.add("active");</p>
<p>tabContent[index].classList.add("active"); </p>
<p> </p>
<p>// add
tabItem[index].appendChild(chosen);</p>
<p>});</p>
<p>});</p>
<p> </p>
<p>// add
if (tabItem[0] != null) {
tabItem[0].dispatchEvent(new Event('click'));
}
</script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인