title: Html tab active
body: <p>I use this example code in <a href="https://www.w3schools.com/howto/howto_js_tabs.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_tabs.asp</a>, i Just want that if the user click button <strong>Paris</strong> even the user refresh the page, the tab will still be in <strong>Paris</strong></p>
  
  <pre><code>&lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"&gt;Enrollment&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Paris')" id="secondOpen" &gt;Student&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Tokyo')" id="thirdOpen"&gt;Parents&lt;/button&gt;
  &lt;/div&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";
  }
  //is this right?
  first = document.getElementById("defaultOpen");
  second = document.getElementById("secondOpen");
  third = document.getElementById("thirdOpen");
  if (second == ('active')){
      document.getElementById("secondOpen").click();
  }else if(third == ('active')){
      document.getElementById("thirdOpen").click();
  }else{
  document.getElementById("defaultOpen").click();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>this is the example of html, I just want that if the user click the paris, even the user refresh the page the paris will active</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";
  }
  
  // is this right?
  first = document.getElementById("defaultOpen");
  second = document.getElementById("secondOpen");
  third = document.getElementById("thirdOpen");
  if (second == ('active')){
  document.getElementById("secondOpen").click();
  }else if(third == ('active')){
      document.getElementById("thirdOpen").click();
  }else{
  document.getElementById("defaultOpen").click();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {font-family: Arial;}
  
  /* Style the tab */
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* 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, 'London')" id="defaultOpen"&gt;London&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Paris')"&gt;Paris&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Tokyo')"&gt;Tokyo&lt;/button&gt;
  &lt;/div&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;</code></pre>
  </div>
  </div>
  </p>