我有带标签的部分,需要在再次单击标签时关闭这些标签。
我认为这需要一个切换方法,但我不确定该怎么做。
这是 HTML:
<div class="tab">
<button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
<button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>
<div id="srv1-sub1" class="tab-content">
<p>Text</p>
</div>
<div id="srv1-sub2" class="tab-content">
<p>Text</p>
</div>
<div id="srv1-sub3" class="tab-content">
<p>Text</p>
</div>
这是标签功能:
function openSubSvc(evt, subSvcName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
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(subSvcName).style.display = "block";
evt.currentTarget.className += " active";
}
这是 CSS:
.tab {
float: left;
padding:0!important;
margin:0!important;
}
.tab button {
padding: 15px;
width: 100%;
text-align: left;
transition: 0.3s;
}
.tab button:last-child {margin-bottom:0;}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}
.tab-content {
width:70.8%!important;
margin-left:2%!important;
margin-bottom:0;
padding:0!important;
}
因此,如果单击第一个选项卡并打开内容,我需要在再次单击时关闭内容。
最佳答案
您必须检查点击按钮上的 active
类。我只是用 if condition
更新了你的代码。谢谢
function openSubSvc(evt, subSvcName) {
var activeClass = evt.target.classList.contains("active")
if(!activeClass){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
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(subSvcName).style.display = "block";
evt.currentTarget.className += " active";
} else {
document.getElementById(subSvcName).style.display = "none";
evt.target.classList.remove("active");
}
}
<div class="tab w-30 ml-100 mp-100">
<button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
<button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>
<div id="srv1-sub1" class="tab-content">
<p>Text 1</p>
</div>
<div id="srv1-sub2" class="tab-content">
<p>Text 2</p>
</div>
<div id="srv1-sub3" class="tab-content">
<p>Text 3</p>
</div>
关于javascript - 再次单击时关闭 javascript 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55478821/