如何在 javascript 中切换多个菜单

Question

我想成功地制作菜单标签。 当您单击其中一个按钮时，它会删除其他按钮的内容并显示其内容。 当您再次单击它时，它的内容消失了，在这最后一部分我遇到了困难

如果您有一些建议或解决方案

<ul>
    <li><a class="tab-button" href="#content1">tab#01</a></li>
    <li><a class="tab-button" href="#content2">tab#02</a></li>
    <li><a class="tab-button" href="#content3">tab#03</a></li>

</ul>   
    
<div class="tab-content hide" id="content1">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="tab-content hide" id="content2">           
    <p>Erat eu finibus. Maecenas finibus </p>
</div>                  
<div class="tab-content hide" id="content3">           
    <p>Curabitur pellentesque, dui non varius accumsan, .</p>           
</div>

<style type="text/css">
    
    .hide{
        display: none;
    }
</style>
<script type="text/javascript">
    

let links = document.querySelectorAll(".tab-button");
for(let i=0; i< links.length; i++){
  let link = links[i];
  link.addEventListener("click", (e) =>{

let content = document.querySelectorAll('.tab-content');
for(let i=0; i< content.length; i++){
  content[i].classList.add('hide');
}

  let href = e.currentTarget.getAttribute('href');
  let activeTab = document.querySelector(href);
  activeTab.classList.remove('hide');

  });
}


</script>

                
       

Answer 1

好的，这是您需要的。

 let links = document.querySelectorAll(".tab-button"); // loop through all the links links.forEach(l => { // add click listeners l.addEventListener("click", (e) => { e.preventDefault(); let currentTab = document.querySelector(`.tab-content${l.href.substr(l.href.indexOf("#"))}`); if(currentTab.classList.contains("hide")){ // add hide class to all the tab content document.querySelectorAll(".tab-content").forEach(t => { t.classList.add("hide"); }); // remove hide class from the tab content which's id matches with the current href currentTab.classList.remove("hide"); }else{ // add hide class to all the tab content document.querySelectorAll(".tab-content").forEach(t => { t.classList.add("hide"); }); } }) })

 .hide{ display: none; }

 <ul> <li><a class="tab-button" href="#content1">tab#01</a></li> <li><a class="tab-button" href="#content2">tab#02</a></li> <li><a class="tab-button" href="#content3">tab#03</a></li> </ul> <div class="tab-content hide" id="content1"> <p>Lorem ipsum dolor sit amet</p> </div> <div class="tab-content hide" id="content2"> <p>Erat eu finibus. Maecenas finibus </p> </div> <div class="tab-content hide" id="content3"> <p>Curabitur pellentesque, dui non varius accumsan, .</p> </div>

Answer 2

如果我理解正确...

 const tabButtons = document.getElementById('tab-buttons'), allContents = document.getElementById('all-contents'); tabButtons.onclick=e=> { if (.e.target.matches('li[data-content]')) return let onContent = e.target.dataset.content if ( allContents.className===onContent ) allContents.className = '' else allContents.className = onContent }

 ul#tab-buttons { cursor: pointer;} section#all-contents > div { display: none; } section#all-contents.content1 > div#content1, section#all-contents.content2 > div#content2, section#all-contents.content3 > div#content3 { display: block; }

 <ul id="tab-buttons"> <li data-content="content1"> tab#01 </li> <li data-content="content2"> tab#02 </li> <li data-content="content3"> tab#03 </li> </ul> <section id="all-contents" > <div id="content1"> <p>Lorem ipsum dolor sit amet</p> </div> <div id="content2"> <p>Erat eu finibus. Maecenas finibus </p> </div> <div id="content3"> <p>Curabitur pellentesque, dui non varius accumsan, .</p> </div> </section>