javascript - jQuery UI 选项卡 - 锚定到内部链接

Question

我在使用带有内部 anchor 链接的 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 函数(因为所有“select”示例对于较新的 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 );
});