title: Showing first tab on page load using javascript
body: <p>I have tabs in my asp.net page, On page load I want only first tab to show and hide the second one. </p>
  
  <p>But At the moment i can see all 3 tabs on page load.</p>
  
  <p>I tried hiding second tab in javascript page load function but then I can show it on click it again. </p>
  
  <p>Any help would be appreciated. </p>
  
  <p>here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  
  ul.tab {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  
  
  /* Style the links inside the list items */
  ul.tab li a {
      display: inline-block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of links on hover */
  ul.tab li a:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  ul.tab li a:focus, .active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;ul class="tab"&gt;
    &lt;li&gt;&lt;a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')"&gt;London&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')"&gt;Paris&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')"&gt;Tokyo&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="London" class="tabcontent"&gt;
    &lt;h3&gt;London&lt;/h3&gt;
    &lt;p&gt;London is the capital city of England.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Paris" class="tabcontent"&gt;
    &lt;h3&gt;Paris&lt;/h3&gt;
    &lt;p&gt;Paris is the capital of France.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Tokyo" class="tabcontent"&gt;
    &lt;h3&gt;Tokyo&lt;/h3&gt;
    &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  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";
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>