如何设置活动的CSS标签菜单？

Question

我有一个问题，我尝试使用css来制作菜单选项卡，我明白了，但问题是如果不单击菜单按钮就无法设置活动的选项卡菜单，这是我编写的代码：

 function openCity(evt, cityName) { 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(cityName).style.display = "block"; evt.currentTarget.className += " active"; } 

 /*Tab*/ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f0ff1e; color:black; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

 <div class="tab"> <button class="tablinks" onclick="openCity(event, 'antrian')">Antrian</button> <button class="tablinks" onclick="openCity(event, 'semua')">Data</button> </div> <div id="antrian" class="tabcontent"> <h3>Antrian</h3> </div> <div id="semua" class="tabcontent"> <h3>Semua</h3> </div> 

我不知道如何修改代码以使"antrian"选项卡成为活动选项卡，而无需首先按下选项卡按钮。 请帮帮我。 谢谢。

Answer 1

<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'antrian')">Antrian</button>
<button class="tablinks" onclick="openCity(event, 'semua')">Data</button>

用此代码替换现有代码

Answer 2

您可以尝试这样的事情：

 document.getElementById('antrian').className = ''; document.getElementsByClassName('tablinks')[0].className = 'active' function openCity(event, city) { if (city === 'semua') { document.getElementById('antrian').className = 'tabcontent'; document.getElementById('semua').className = ''; document.getElementById('antrianBtn').className = ''; document.getElementById('semuaBtn').className = 'active'; } if (city === 'antrian') { document.getElementById('antrian').className = ''; document.getElementById('semua').className = 'tabcontent'; document.getElementById('antrianBtn').className = 'active'; document.getElementById('semuaBtn').className = ''; } } 

 /*Tab*/ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f0ff1e; color: black; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

 <div class="tab"> <button id="antrianBtn" class="tablinks" onclick="openCity(event, 'antrian')">Antrian</button> <button id="semuaBtn" class="tablinks" onclick="openCity(event, 'semua')">Semua</button> </div> <div id="antrian" class="tabcontent"> <h3>Antrian</h3> </div> <div id="semua" class="tabcontent"> <h3>Semua</h3> </div>