我有帶有選項(xiàng)卡的部分,需要再次單擊該選項(xiàng)卡時(shí)關(guān)閉這些選項(xiàng)卡。我認(rèn)為這需要切換方法,但是我不確定該怎么做。這是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;}因此,如果單擊第一個(gè)選項(xiàng)卡并打開內(nèi)容,則我需要在再次單擊該內(nèi)容時(shí)將其關(guān)閉。
再次單擊時(shí)關(guān)閉javascript選項(xiàng)卡
猛跑小豬
2021-04-05 16:18:24