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函数（因为所有“select”示例都已经过时了更新的jQuery UI版本），但是没有什么对我有用。有人可以帮忙吗？ jQuery UI文档没有显示这个例子。

Answer 1

使用下面的代码。检查DEMO。

使用tab的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选项卡 - 锚定到内部链接

1 个答案: