title: How to prevent tabs from changing on their own?
body: <p>I have a set of tabs that are having an issue on mobile. When the window is scrolled the selected tab closes itself and goes back to the default tab (the one shown on page load).  How can I prevent this from happening, so that when a user selects a tab it stays open until they choose another one?</p>
  
  <p>Here is my 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 openTab(evn, tabName) {
    var i, tabcontent, tablinks;
  
    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
  
    tablinks = document.getElementsByClassName("tab-link");
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  
    document.getElementById(tabName).style.display = "block";
    evn.currentTarget.className += " active";
  }
  
   document.getElementById("defaultOpen").click();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tabs"&gt;
    &lt;button class="tab-link" onclick="openTab(event, 'tab-content')" id="defaultOpen"&gt;
      Tab Title #1
    &lt;/button&gt;
    &lt;button class="tab-link" onclick="openTab(event, 'tab-content-two')"&gt;
      Tab Title #2
    &lt;/button&gt;
    &lt;button class="tab-link" onclick="openTab(event, 'tab-content-three')"&gt;
      Tab Title #3
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="tab-content" class="tab-content"&gt;
      Content for first tab.
  &lt;/div&gt;
  
  &lt;div id="tab-content-two" class="tab-content"&gt;
      Content for second tab.
  &lt;/div&gt;
  
  &lt;div id="tab-content-three" class="tab-content"&gt;
      Content for third tab.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>