2012-06-20 4 views
0

Поле «Содержимое» находится в середине страницы. Когда я нажимаю на вкладки, страница прокручивается до середины (где находится окно содержимого вкладки).Jquery hash tag link to Tabs issue

Это связано с ссылками на хэш-теги.
Как открыть вкладку без прокрутки страницы до середины?

<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/

ответ

1

ev.preventDefault Использование при первом добавлении ev аргумент к вашей click функции и затем вызвать его следующим образом:

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

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

Также полезно знать: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – 321X