我有这个标签代码片段编辑器：
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>如果单击这些按钮之一，将在输出旁边打开一个选项卡。
我使用了 W3Schools 的这个例子并添加了一个代码部分。它仍然不完美，但你可以看到它是什么。
当您单击活动按钮时，如何才能关闭这些选项卡？
（完全没有jQuery）
在这里，我首先currentTab使用 querySelector查找当前选项卡 ( )。隐藏所有选项卡和所有内容后，我测试 currentTab 是否与新选择的选项卡不同，如果是这样，我将使其可见。
顺便提一句。querySelectoAll并forEach使得它更容易阅读的代码。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句