Jquery hash tag link to Tabs issue

Question

My Content box is located at the middle of the page. When ever I click on tabs, page is scrolling to middle (where tab content box located ).

This is due to hash tag links.
How to open the tab without page scrolling to middle?

<ul class="tabs">
    <li><a href="#movies" class="defaulttab" rel="movies">movies</a></li>
    <li><a href="#comments" rel="comments">Comments</a></li>
</ul>

<div class="contentbox">
    <div class="tab-content" id="movies">
        content 1
    </div>
    <div class="tab-content" id="comments">
        Tab #2 content
    </div>

jquery

$(document).ready(function() {
    $('.tabs a').click(function() {
        switch_tabs($(this));
    });
    switch_tabs($('.defaulttab'));
});

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

$(function() {
    var hash = window.location.href.split('#').pop();
    var allowed = ['movies', 'comments'];
    if (allowed.indexOf(hash) == -1) hash = allowed[0];
    switch_tabs($('a[href=#' + hash + ']'));
});

http://jsfiddle.net/d6bts/3/

Answer 1

Use ev.preventDefault by first adding the ev argument to your click function and then calling it as follows:

$('.tabs a').click(function (ev) {
    ev.preventDefault();

    var $this = $(this);
    $('.tabs a').removeClass("selected");
    $this.addClass('selected');
    switch_tabs($this.attr('href'));
    return false;
});