jQuery UI選項卡 - 錨定到內部鏈接

Question

我在使用jQuery UI（v1.11 +）選項卡與內部錨鏈接時遇到問題。我的代碼如下：

的Javascript：

$(document).ready(function() { 
$("#tabs").tabs(); 

}); 

HTML：

<div id="tabs"> 
       <ul class="tabs-list"> 
        <li> <a href="#tabs-1"> 
        <div class="tab"> Tab 1 </div> 
        </a> </li> 
        <li> <a href="#tabs-2"> 
        <div class="tab"> Tab 2 </div> 
        </a> </li> 
       </ul> 

       <div id="tabs-1"> 
        <div><a href="#">Text for tab 1</a></div> 
        </div> 
       </div> 
       <div id="tabs-2"> 
       <a href="#"> Text for Tab 2</a> 
       </div> 
</div> 

我有麻煩試圖鏈接從文本鏈接，這些標籤是在頁面的不同區域。我們的目標是每次點擊文字鏈接到指定的標籤後，順利滾動：

<a href="#tabs-1">Link to Tab 1</a> 
<a href="#tabs-2">Link to Tab 2</a> 

我在這裏嘗試了各種搜索，包括使用beforeActivate功能（因爲所有的「選擇」的例子是過時與新jQuery UI的版本），但沒有爲我工作。有人可以協助嗎？ jQuery UI文檔沒有顯示這個例子。

Answer 1

使用下面的代碼。檢查DEMO。

使用active選項卡使選項從外部資源。查看更多HERE

使用beforeActivate事件在激活標籤前立即觸發。檢查HERE

HTML

<div id="tabs"> 
      <ul class="tabs-list"> 
       <li> <a href="#tabs-1"> 
       <div class="tab"> Tab 1 </div> 
       </a> </li> 
       <li> <a href="#tabs-2"> 
       <div class="tab"> Tab 2 </div> 
       </a> </li> 
      </ul> 

      <div id="tabs-1"> 
       <div><a href="#">Text for tab 1</a></div> 
       </div> 


       <div id="tabs-2"> 
      <a href="#"> Text for Tab 2</a> 
      </div> 
</div> 
<a href="#tabs-1" class="external-tab">Link to Tab 1</a> 
<a href="#tabs-2" class="external-tab">Link to Tab 2</a> 

JQUERY

var tab ; 
$("#tabs").tabs({ 
    beforeActivate : function(event, ui) { 
    $("html, body").animate({ scrollTop: $("#tabs").offset().top }, 1000); 
    } 
}); 

$('.external-tab').click(function (event) { 
    event.preventDefault(); 
    tab = $(this).attr('href'); 
    var index = $('div[id^=tabs-]').index($(tab)); 
    $('#tabs').tabs("option", "active", index); 
});