JqueryUI 1.11 选项卡 link 在同一页面上直接切换到选项卡

Question

Stack Overflow 上的

None 解决方案适用于 1.11，我已经测试了每一个。

我需要能够 link 使用选项卡 ID 而不是它在页面上的位置从菜单到同一页面上的选项卡。

我已经可以从外部页面执行此操作，如您在此处所见：http://agileprojects.ro/tabs/links.html. I also have a solution for linking inside the page 但仅限于选项卡的位置（第一、第二等）。遗憾的是，这不是一个有效的选项：

links 是动态创建的站点菜单，它们应该具有相同的行为（又名：我不能只为某些 links 取决于我在哪个页面上，或者更确切地说，我可以写一些 JavaScript 来达到这个效果，但是一旦我把网站翻过来就不可能添加新的 links 和新的标签）。 =14=]

这将导致最终用户无法切换选项卡，link 无法正常工作。

代码（尽管可以在 linked 页面中访问）

    <script>
  $(function() {
    $('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
  });
            jQuery(document).ready(function($){
    $('#link-1').click(function(){
        $('#tabs').tabs( 'option', 'active', 0 ); // Selects the first tab
    });$('#link-2').click(function(){
        $('#tabs').tabs( 'option', 'active', 1 ); // Selects the first tab
    });$('#link-3').click(function(){
        $('#tabs').tabs( 'option', 'active', 2 ); // Selects the first tab
    });
});
  </script>

html

<h2>These SHOULD link to tab ID </h2>
<p>They are the same as on the <a href="/tabs/links.html">links.html</a> page, same code, etc. THey don't work :(</p>
<a href="#tabs-1">Tab 1</a><br />
<a href="http://agileprojects.ro/tabs/tabs.html#tabs-2">Tab 2</a><br />
<a href="#tabs-3">Tab 3</a><br />
<br /><br /><br />

<h2>These link to tab position </h2>
<p>aka, they activate tab 1, tab 2, tab 3, etc. </p>
<a href="#tabs-1" id="link-1">Tab 1</a><br />
<a href="#tabs-2" id="link-2">Tab 2</a><br />
<a href="#tabs-3" id="link-3">Tab 3</a><br />

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
<div id="tabs-1">dwedwedwedwedwed</div>
<div id="tabs-2">dwedwedwedwedwed</div>
<div id="tabs-3">dwedwedwedwedwed</div>
</div>

Answer 1

遗憾的是，选项卡小部件不会自动执行此操作。您必须监听 hashchange 事件，并手动设置活动选项卡。以下是可能适合您的方法：

$('#tabs').tabs({
    create: function() {
        var widget = $(this).data('ui-tabs');
        $(window).on('hashchange', function() {
            widget.option('active', widget._getIndex(location.hash));
        });
    }
});

以上代码将为 create event. Then, we get the actually widget instance using data() 提供处理程序。接下来，我们为 hashchange 事件设置一个处理程序。只要单击我们的外部链接之一，就会触发此事件。此处理程序将根据当前 location.hash 值设置活动选项卡。

我们正在使用 _getIndex()，这是一种内部选项卡方法，可根据哈希值计算出活动选项卡的索引。尽管是一种内部方法，但在这种情况下它是一个很好的捷径。

这是一个 example。

JqueryUI 1.11 选项卡 link 在同一页面上直接切换到选项卡

JqueryUI 1.11 tabs link directly to tab while on the same page

html

javascript

jquery

tabs

jquery-ui