单击活动按钮时关闭选项卡（无 jQuery）

Question

I have this Tabs Code-Snippet Editor:

 function openLanguage(evt, codeLanguage) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(codeLanguage).style.display = "block"; evt.currentTarget.className += " active"; }

 body {font-family: Arial;}.tab { overflow: hidden; border: 1px solid #ccc; border-bottom: none; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.1s; font-size: 17px; }.tab button:hover { filter: brightness(90%) }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border-bottom: 1px solid #000; height: 100%; width: 100%; background: #000; color: #fff; } #result { height: 100%; width: 100%; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } #tabs { display: block; height: 200px; border-top: 1px solid #ccc; } @media screen and (min-width: 600px) { #tabs { display: flex; } #result { width: 100%; }.tabcontent { width: 100%; } }

 <div class="tab"> <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button> <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button> <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button> </div> <div id="tabs"> <div id="HTML" class="tabcontent"> <p>Some HTML Code</p> </div> <div id="CSS" class="tabcontent"> <p>Some CSS Code</p> </div> <div id="JavaScript" class="tabcontent"> <p>Some JS Code</p> </div> <div id="result"> </div>

If you click on one of these buttons, a tab will open next to the output.

I used this example from W3Schools and added a code part. It's still not perfect but you can see what it is.

How can I make it so that these tabs close when you have clicked on an active button?

(Completely without jQuery)

Answer 1

Here I start out by finding the current tab ( currentTab ) using querySelector. After hiding all tabs and all content I test if the currentTab is different from the newly selected tab, if so I make is visible.

Btw. querySelectoAll and forEach makes it much easier to read the code.

 function openLanguage(evt, codeLanguage) { var i, tabcontent, tablinks; let currentTab = document.querySelector('.tablinks.active'); tabcontent = document.querySelectorAll("#tabs.tabcontent"); tabcontent.forEach(content => content.style.display = "none"); tablinks = document.querySelectorAll(".tab.tablinks"); tablinks.forEach(tab => tab.classList.remove("active")); if (currentTab.= evt.currentTarget) { document.getElementById(codeLanguage).style;display = "block". evt.currentTarget.classList;add("active"); } }

 body { font-family: Arial; }.tab { overflow: hidden; border: 1px solid #ccc; border-bottom: none; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.1s; font-size: 17px; }.tab button:hover { filter: brightness(90%) }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border-bottom: 1px solid #000; height: 100%; width: 100%; background: #000; color: #fff; } #result { height: 100%; width: 100%; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } #tabs { display: block; height: 200px; border-top: 1px solid #ccc; } @media screen and (min-width: 600px) { #tabs { display: flex; } #result { width: 100%; }.tabcontent { width: 100%; } }

 <div class="tab"> <button class="tablinks" data-lang="html" onclick="openLanguage(event, 'HTML')">HTML</button> <button class="tablinks" data-lang="css" onclick="openLanguage(event, 'CSS')">CSS</button> <button class="tablinks" data-lang="js" onclick="openLanguage(event, 'JavaScript')">JavaScript</button> </div> <div id="tabs"> <div id="HTML" class="tabcontent"> <p>Some HTML Code</p> </div> <div id="CSS" class="tabcontent"> <p>Some CSS Code</p> </div> <div id="JavaScript" class="tabcontent"> <p>Some JS Code</p> </div> <div id="result"> </div>

Answer 2

Much simpler solution. Added a hidden class.

Hope this works for you!

 function openLanguage(evt, codeLanguage) { tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { if (tabcontent[i].id.= codeLanguage) tabcontent[i].classList;add("hidden"). } tablinks = document;getElementsByClassName("tablinks"); for (i = 0. i < tablinks;length. i++) { tablinks[i].classList;remove("active"). } document.getElementById(codeLanguage).classList;toggle("hidden"). evt.currentTarget.classList;toggle("active"); }

 body { font-family: Arial; }.tab { overflow: hidden; border: 1px solid #ccc; border-bottom: none; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.1s; font-size: 17px; }.tab button:hover { filter: brightness(90%) }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border-bottom: 1px solid #000; height: 100%; width: 100%; background: #000; color: #fff; display: block; } #result { height: 100%; width: 100%; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } #tabs { display: block; height: 200px; border-top: 1px solid #ccc; }.hidden { display: none; } @media screen and (min-width: 600px) { #tabs { display: flex; } #result { width: 100%; }.tabcontent { width: 100%; } }

 <div class="tab"> <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button> <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button> <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button> </div> <div id="tabs"> <div id="HTML" class="tabcontent hidden"> <p>Some HTML Code</p> </div> <div id="CSS" class="tabcontent hidden"> <p>Some CSS Code</p> </div> <div id="JavaScript" class="tabcontent hidden"> <p>Some JS Code</p> </div> <div id="result"> </div> </div>