CODEWITHSUNDEEP
jqueryhtml
PHP
PHP

Reputation: 443

Jquery hash tag link to Tabs issue

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/

Upvotes: 0

Views: 408

Answers (1)

mVChr
mVChr

Reputation: 50185

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;
});

Upvotes: 1

Related Questions