질문

그래서 id는 Home-Popular에 대해 각각 개별적으로 선택할 수 있습니다. 감사 할만한 설명을 남길 수 있다면 왜 그렇게하는지 잘 모르겠습니다. 향후 코드를 최적화하기위한 팁과 함께 도움을 주시면 감사하겠습니다. 감사합니다.

<html>
<head>
<script src="script.js"defer></script>
<link rel="stylesheet" href="cults.css">
<title> follow the cult </title>
</head>
    <h1 style="text-align:center"> CULT </h1> 
<body> 
<ul class="tabs">
    <li data-tab-target="#Home" class="active tab"> Home </li>
    <li data-tab-target="#Men" class="tab"> Men </li>
    <li data-tab-target="#Women" class="tab"> Women </li>
    <li data-tab-target="#New Arrivals" class="tab"> New Arrivals </li>
    <li data-tab-target="#Popular" class="tab"> Popular </li>
</ul> 
<br></br>
    <div class="tab-content">
       <div id="Home" data-tab-content class="active">
            <h1>home</h1>
            <p> Welcome Home</p>
        </div>
        <div id="Men"data-tab-content>
            <h1>Men</h1>
            <p> yang</p>
        </div>
        <div id="Women" data-tab-content>
            <h1>Women</h1>
            <p> ying</p>
        </div>
        <div id="New Arrivals"data-tab-content>
            <h1>New</h1>
            <p> new shit</p>
        </div>
        <div id="Popular"data-tab-content>
            <h1>The Orbit</h1>
            <p> most popular</p>
        </div>
</body>
</html>

'css 문서'

[data-tab-content] {
display: none;
}

.active[data-tab-content] {
display: block;
}
body {
    padding:0;
    margin:0;
}
.tabs{
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 3px solid black;
}
.tab {
    cursor :pointer;
    padding: 10px;
}
.tabs.active {
    background-color:#CCC;
}
.tabs:hover{
    background-color:#AAA;
}
.tab-content {
    margin-left:20px;
    margin-right:20px;
}

'script'

const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')

tabs.forEach(tab => {
    tab.addEventListener('click',() => {
        const target = document.querySelector(tab.dataset.tabTarget )
        tabContents.forEach(tabContent => {
         tabContent.classlist.remove'active'))
        })
        tab.forEach(tab => {
         tab.classlist.remove'active'))
        })
        tab.classList.add('active')
         target.classlist.add('active')
    })
})

향후 코드를 최적화하기위한 팁과 함께 도움을 주시면 감사하겠습니다. 감사합니다.

답변1

CSS의 개별 탭 대신 상위 요소를 타겟팅했기 때문에에서 :hover모든 탭을 강조 표시했습니다.
#New Arrivals. 공백은를 사용할 때 의미 querySelector가 있으며 중첩 된 요소를 선택하는 것입니다. element under **Arrivals** also the child of **#new**, 공백을 생략하십시오.
event.target클릭 한 탭을 참조하는 데 사용 합니다.

const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
    tab.addEventListener('click',(event) => {
        const target = document.querySelector(event.target.dataset.tabTarget)
        tabs.forEach(tab => {
         tab.classList.remove('active')
        })
        event.target.classList.add('active');

        tabContents.forEach(tabContent => {
         tabContent.classList.remove('active')
        })
        target.classList.add('active')
    })
})

[data-tab-content] {
display: none;
}

.active[data-tab-content] {
display: block;
}
body {
    padding:0;
    margin:0;
}
.tabs{
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 3px solid black;
}
.tab {
    cursor :pointer;
    padding: 10px;
}
.tab.active {
    background-color:#CCC;
}
.tab:hover{
    background-color:#AAA;
}
.tab-content {
    margin-left:20px;
    margin-right:20px;
}

<html>
<head>
<script src="script.js"defer></script>
<link rel="stylesheet" href="cults.css">
<title> follow the cult </title>
</head>
    <h1 style="text-align:center"> CULT </h1> 
<body> 
<ul class="tabs">
    <li data-tab-target="#Home" class="active tab"> Home </li>
    <li data-tab-target="#Men" class="tab"> Men </li>
    <li data-tab-target="#Women" class="tab"> Women </li>
    <li data-tab-target="#NewArrivals" class="tab"> New Arrivals </li>
    <li data-tab-target="#Popular" class="tab"> Popular </li>
</ul> 
<br></br>
    <div class="tab-content">
       <div id="Home" data-tab-content class="active">
            <h1>home</h1>
            <p> Welcome Home</p>
        </div>
        <div id="Men"data-tab-content>
            <h1>Men</h1>
            <p> yang</p>
        </div>
        <div id="Women" data-tab-content>
            <h1>Women</h1>
            <p> ying</p>
        </div>
        <div id="NewArrivals" data-tab-content>
            <h1>New</h1>
            <p> new shit</p>
        </div>
        <div id="Popular" data-tab-content>
            <h1>The Orbit</h1>
            <p> most popular</p>
        </div>
</body>
</html>

Expand snippet

출처 : https://stackoverflow.com/questions/62616327/for-some-reason-all-my-tabs-are-considered-as-one-how-can-i-get-them-to-be-sepa