jQuery UI 选项卡 - 内部链接的锚点

Question

我在使用带有内部锚 link 的 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>

我在尝试从位于页面不同区域的 link 文本 link 到这些选项卡时遇到问题。 objective 是点击每个文本 link 到指定标签后平滑滚动：

<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 );
});

jQuery UI 选项卡 - 内部链接的锚点

jQuery UI Tabs - Anchor to Internal Links

javascript

jquery

jquery-ui

jquery-tabs