[英]Close javascript tabs when clicked again
I have sections with tabs and need those tabs to close when the tab is clicked again. 我有带有标签的部分,需要再次单击该标签时关闭这些标签。
I think this requires a toggle method but I'm not sure how to do that. 我认为这需要切换方法,但是我不确定该怎么做。
Here's the HTML: 这是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>
Here's the tab function: 这是制表符功能:
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";
}
Here is the CSS: 这是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;
}
So if the first tab is clicked and the content opens, I need the content to close when it is clicked again. 因此,如果单击第一个选项卡并打开内容,那么我需要在再次单击内容时将其关闭。
You have to check active
class on a clicked button. 您必须在单击的按钮上检查
active
班级。 I just update your code with if condition
. 我只是用
if condition
更新您的代码。 Thanks 谢谢
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>
You can check whether the clicked tab is already visible. 您可以检查单击的选项卡是否已经可见。 When you do:
当您这样做时:
document.getElementById(subSvcName).style.display = "block";
First, ask if it is already block
(untested, unstylish code ahead): 首先,询问它是否已经被
block
(前面未经过测试的,未经修饰的代码):
var el = document.getElementById(subSvcName);
if (el.style.display !== 'none') {
el.style.display = 'none'; // hide if already visible
} else {
el.style.display = 'block' // show otherwise
}
You can update the function this way: 您可以通过以下方式更新功能:
function openSubSvc(evt, subSvcName) {
var i, tabcontent, tablinks, me, shoulOpenTab;
me = document.getElementById(subSvcName);
// Checks if this tab has class active
isActive = me.classList.contains("active");
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", "");
}
// If this tab has active class onClick, you don't need to select again
if (!isActive) {
me.style.display = "block";
evt.currentTarget.className += " active";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.