title: A href"#" data-toggle anchor goes to the top
body: <p>There is a project I took over for restyling and they asked me to fix the anchors for tabs where the user gets send to the top in firefox: <a href="http://new.yourcoach.be/opleidingen/nlp-bootcamp/" rel="nofollow noreferrer">http://new.yourcoach.be/opleidingen/nlp-bootcamp/</a></p>
  
  <p>It works like a charm in Chrome but not in other browsers</p>
  
  <pre><code>&lt;script&gt;function changeTab(e){
  e.preventDefault();
  console.log("Changing tab");
  }&lt;/script&gt;
  
   &lt;a class="nav-link &lt;?php if ($i == 1): ?&gt;active&lt;?php endif; ?&gt; text-uppercase"  data-toggle="tab" data-target="#&lt;?php echo sanitize_title($tab['_title']); ?&gt;" href="javascript:;"  onClick="changeTab(event)"&gt;&lt;?php echo $tab['_title']; ?&gt; &lt;/a&gt;
  </code></pre>
  
  <p>I tried the following without succes: </p>
  
  <pre><code>&lt;a href="javascript:void(0);"&gt;Anchor&lt;/a&gt;
  
  &lt;a href="#" rel="no-refresh"&gt;Anchor&lt;/a&gt;
  
  &lt;a href="#" onclick="return false;"&gt;Anchor&lt;/a&gt;
  
  &lt;script&gt;
      $( "tablink" ).click(function() {
          e.preventDefault();
  console.log("Changing tab");
      })(jQuery);
  &lt;/script&gt;
  &lt;a id="tablink"  href="#"&gt;Anchor&lt;/a&gt;
  </code></pre>
  
  <p><strong>Solution</strong></p>
  
  <pre><code>&lt;a href="#!"&gt;Anchor&lt;/a&gt;
  </code></pre>