JqueryUI 1.11选项卡在同一页面上直接链接到选项卡

时间:2015-02-25 19:29:55

标签: javascript jquery html jquery-ui tabs

Stack Overflow上的解决方案都不适用于1.11,我已经测试过它们中的每一个。

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

我已经可以从外部页面执行此操作,如您所见:http://agileprojects.ro/tabs/links.html。我也有一个解决方案,用于链接inside the page但仅限于标签的位置(第一个,第二个等)。遗憾的是,这不是一个有效的选项:

链接是动态创建的网站菜单,它们应该全面具有相同的行为(也就是说:我不能为某些链接添加点击事件,具体取决于我所在的页面,或者更确切地说,我可以为此效果编写一些JavaScript,但是一旦我翻过网站,就不可能添加新链接和新标签。

最终用户无法切换标签,链接也无法正常工作。

代码(虽然可以在链接的页面中访问)

    <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>

1 个答案:

答案 0 :(得分:2)

很遗憾,标签小部件不会自动执行此操作。您必须侦听hashchange个事件,并手动设置活动选项卡。这是一种可能适合您的方法:

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

上述代码将为create事件提供处理程序。然后,我们使用data()获取实际的小部件实例。接下来,我们为hashchange事件设置处理程序。只要单击其中一个外部链接,就会触发此操作。此处理程序将根据当前location.hash值设置活动选项卡。

我们正在使用_getIndex(),一种内部标签方法,根据哈希值计算出活动标签的索引。尽管是一种内部方法,但在这种背景下它是一条很好的捷径。

这里是example