2012-08-27 2 views
1

jquery 탭 콘텐츠 내에 앵커를 연결하려고합니다. 그러나 나는 탭을 클릭 할 때 페이지가 탭 컨텐트 div의 맨 위로 점프하고 탭을 자른다. 탭을 클릭하면 스크롤하지 않고 동일한 위치에 머물러 있기를 바랍니다. 또한 URL에서 각 탭과 내부 앵커에 액세스해야하며, 탭 콘텐츠 div 상단으로 이동하지 않고 상단에 탭을 잘라내려면 탭 URL이 필요합니다. 예 : 다음 http://mysite.com/test#tab1jquery 탭에 콘텐츠 앵커가 포함되어 있음 - 점프 문제

는 내가 지금까지 무엇을 가지고 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(function() { 
$('a.refresh').live("click", function() { 
     location.reload(); 
}); 
}); 
</script> 

<section class="wrap"> 

<div class="tablist"> 
<ul class="tabs"> 
<li><a href="#tab1">Tab 1</a></li> 
<li><a href="#tab2">Tab 2</a></li> 
<li><a href="#tab3">Tab 3</a></li> 

</ul> 
</div> 
<div class="panes"> 
<div id="tab1" class="tab-content"> 
Tab 1 content 
<br /> 
<a name="anchor1" id="anchor1">Anchor 1</a> 
</div> 

<div id="tab2" class="tab-content"> 
Tab 2 content 
</div> 

<div id="tab3" class="tab-content"> 
Tab 3 content 
<br /> 
<a name="anchor2" id="anchor2">Anchor 2</a> 
</div> 

</div> 
</section> 

<script type="text/javascript"> 
$(document).ready(function() { 
var $tabContent = $(".tab-content"), 
    $tabs = $("ul.tabs li"), 
    tabId; 

$tabContent.hide(); 
$("ul.tabs li:first").addClass("current").show(); 
$tabContent.first().show(); 

$tabs.click(function() { 
    var $this = $(this); 
    $tabs.removeClass("current"); 
    $this.addClass("current"); 
    $tabContent.hide(); 
    var activeTab = $this.find("a").attr("href"); 
    $(activeTab).fadeIn(); 

}); 

// Grab the ID of the .tab-content that the hash is referring to 
tabId = $(window.location.hash).closest('.tab-content').attr('id'); 

// Find the anchor element to "click", and click it 
$tabs.find('a[href=#' + tabId + ']').click(); 
}) 

$('a').not('.tabs li a').on('click', function(evt) { 
evt.preventDefault(); 
var whereTo = $(this).attr('goto'); 
$tabs = $("ul.tabs li"); 
$tabs.find('a[href=#' + whereTo + ']').trigger('click'); 

$('html, body').animate({ 
    scrollTop: $('#'+whereTo+' a').offset().top }); 


}); 
</script> 

이 어떤 생각, 아이디어, 또는 도움이 많이 주시면 감사하겠습니다!

감사합니다.

+0

이 왜 그 행동을 중지해야하는 앵커 태그 그래서 the documentation

를 참조 기본 동작을 중지하는 경우에 이것을 추가해야 그것이 당신이 막으려 고 시도하는 것이라면 당신의 코드에 움직이는 스크롤이 있습니까? –

+0

콘텐츠 내의 앵커는 해당 앵커로 이동합니다. – Air

답변

1

당신은

preventDefault(); 

당신이

$('#yourselector').click(function(e){ 
    e.preventDefault(); 
}); 
+0

감사합니다 !!! 당신은 생명의 은인입니다 :) – Air

+0

나는 탭이있는 URL에 문제가 있습니다. 예를 들어, 외부에서 탭으로 이동합니다. http : //www.mysite.com#tab1 ... 여전히 탭 상단으로 이동합니다. - 페이지 상단 대신에 content div. 그것에 대한 제안이 있습니까? – Air

+0

# tab1을 URL에 추가하면 기본적으로 페이지가 해당 ID (해당되는 경우 tab1)로 스크롤됩니다. 이유는 무엇입니까? 페이지가 그 링크가 무엇입니까? – hsalama