title: How to prevent auto scrolling when click tab
body: <p>I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my HTML:</p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li class="tab1 active"&gt;
          &lt;i class="fa fa-external-link"&gt;&lt;/i&gt; 
          &lt;a href="#quick-reports" class="tab"&gt;Quick Reports&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="tab1"&gt;
          &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;
          &lt;a href="#my-folders" class="tab"&gt;My Folders&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="tab1"&gt;
          &lt;i class="fa fa-folder-open-o"&gt;&lt;/i&gt;
          &lt;a href="#my-team-folders" class="tab"&gt;My Team Folders&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="tab1"&gt;
          &lt;i class="fa fa-files-o"&gt;&lt;/i&gt;
          &lt;a href="#public-folders" class="tab"&gt;Public Folders&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var open_tab = function() {
      $('.tab1').each(function (i, tab) {
          UTILS.addEvent(tab, 'click', function() {
              $('.list li.active').removeClass('active');
              $(this).addClass('active');
              $('.active-panel').removeClass('active-panel');
  
              var target_panel_selector = $(this).find('a').attr('href');
              $(target_panel_selector).addClass('active-panel');
              window.location.hash = target_panel_selector ;
          });
      });
  };
  </code></pre>
  
  <p>And the style of <code>.active-panel</code> is <code>display: block</code>. I tried to use:</p>
  
  <pre><code>e.preventDefault();
  </code></pre>
  
  <p>or </p>
  
  <pre><code>tab.find('a').on('click', function(e){
      alert("finally!!");
      e.preventDefault();
  });
  </code></pre>
  
  <p>and other stuff I found on the web but nope, not working.</p>