2012-06-20 2 views
0

내 콘텐츠 상자는 페이지 중간에 있습니다. 탭을 클릭하면 페이지가 가운데로 스크롤됩니다 (탭 내용 상자 위치).탭에 대한 Jquery 해시 태그 링크

해시 태그 링크 때문입니다.
페이지를 스크롤하지 않고 탭을 열려면 어떻게해야합니까?

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

먼저 다음과 같이 호출 다음 click 함수에 ev 인수를 추가하고하여 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 :

$('.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