title: How to set an active css tab menu?
body: <p>I have a problem, I try to make menu tab using css, I got it, but the problem is I can't set an active tab menu without click the menu button, this is what i code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      
      for (i = 0; i &lt; tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
     }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab"&gt;
      &lt;button class="tablinks" onclick="openCity(event, 'antrian')"&gt;Antrian&lt;/button&gt;
      &lt;button class="tablinks" onclick="openCity(event, 'semua')"&gt;Data&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="antrian" class="tabcontent"&gt;
         &lt;h3&gt;Antrian&lt;/h3&gt;
    &lt;/div&gt;
  
    &lt;div id="semua" class="tabcontent"&gt;
      &lt;h3&gt;Semua&lt;/h3&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't know how to modify the code to make the <code>"antrian"</code> tab to be an active tab without need to press the tab button first. Help me please. Thank you.</p>