jQuery UI选项卡 - 锚定到内部链接 [英] jQuery UI Tabs - Anchor to Internal Links

问题描述

我在使用带有内部锚链接的jQuery UI（v1.11 +）选项卡时遇到了麻烦。我的代码如下：

I'm having trouble using jQuery UI (v1.11+) Tabs with internal anchor links. My code is as follows:

Javascript：

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>

我在尝试从位于不同区域的文本链接链接到这些标签时遇到问题页。目标是在点击指向标签的每个文本链接后平滑滚动：

I am having trouble trying to link to these tabs from text links that are at a different area of the page. The objective is to smoothly scroll after clicking each text link to the designated tab:

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

我在这里尝试了各种搜索，包括使用beforeActivate函数（因为所有select示例都是用更新的jQuery UI版本过时了，但没有什么对我有用。有人可以帮忙吗？ jQuery UI文档没有显示这个例子。

I've tried various searches here, including using the beforeActivate function (since all "select" examples are outdated with newer jQuery UI versions), but nothing works for me. Can someone please assist? The jQuery UI docs do not show examples of this.

推荐答案

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

use below code . check DEMO .

使用活动选项卡从外部资源中选择。查看更多信息 HERE

use active option of tab to make selected from external resources. check more HERE

使用 beforeActivate 事件在激活选项卡之前立即触发。查看 HERE

use beforeActivate event Triggered immediately before a tab is activate . check 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选项卡 - 锚定到内部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！