如何设置活动的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>