How to prevent auto scrolling when click tab
<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>