JqueryUI 1.11选项卡在同一页面上直接链接到选项卡 [英] JqueryUI 1.11 tabs link directly to tab while on the same page

问题描述

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

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

我已经可以从外部页面那样做了，你可以在这里看到： http://agileprojects.ro/tabs/links.html 。我也有一个解决方案，用于链接页面内，但仅限于标签的位置（首先，第二，等等）。遗憾的是，这不是一个有效的选项：

链接是动态创建的网站菜单，它们应该全面具有相同的行为（又名：我无法添加一个点击事件只针对某些链接，具体取决于我所在的页面，或者更确切地说，我可以为此效果编写一些JavaScript，但是一旦我翻过网站，就不可能添加新链接和新标签。 / p>

这将使最终用户无法切换选项卡并使链接正常工作。

代码（尽管可以在链接的页面中访问）

 < 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）; //选择第一个标签
}）; $（'＃link-2'）。click（function（）{
 $（'＃tabs' ）.tabs（'option'，'active'，1）; //选择第一个选项卡
}）; $（'＃link-3'）。click（function（）{
 $（ '#tabs'）。tabs（'option'，'active'，2）; //选择第一个标签
}）; 
}）; 
< / script> 
  

html

 < h2>这些应该链接到标签ID< / h2> 
< p>它们与< a href =/ tabs / links.html> links.html< / a>上的相同页面，相同的代码等。它不起作用:(< / 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>这些链接到标签位置< / h2> 
< p> aka，它们激活标签1，标签2，标签3等。< / p> 
< a href = ＃tabs-1id =link-1>标签1< / a>< br /> 
< a href =＃tabs-2id =link-2> ;标签2< / a>< br /> 
< a href =＃tabs-3id =link-3>标签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>标签3< / a>< / li> 
< / ul> 
< div id =tabs-1> dwedwedwedwedwed< / div> ; 
< div id =tabs- 2\" > dwedwedwedwedwed< / DIV> 
< div id =tabs-3> dwedwedwedwedwed< / div> 
< / div> 
  

解决方案

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

  $（'＃tabs'）。tabs（{
 create： function（）{
 var widget = $（this）.data（'ui-tabs'）; 
 $（window）.on（'hashchange'，function（）{
 widget。 option（'active'，widget._getIndex（location.hash））; 
}）; 
} 
}）; 
  

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

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

这是一个示例。

None of the solutions present on Stack Overflow works for 1.11, I have tested each and every one of them.

I need to be able to link from a menu to a tab on the same page using the tab id and not its position on the page.

I can already do that from an external page as you can see here: http://agileprojects.ro/tabs/links.html. I also have a solution for linking inside the page but ONLY to the position of the tab (first, second, etc.). Sadly this is not a valid option as:

the links are the site menu which are created dynamically and they should have the same behavior all-around (aka: I cannot add an on-click event just for some of the links depending on which page I am on, or rather, I can write some JavaScript to this effect, but adding new links and new tabs would be impossible once I turn the site over).

It would make it impossible for the tabs to be switched around by the end user and the links to work correctly.

Code (though it's accessible in the pages 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>

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

解决方案

Unfortunately the tabs widget doesn't do this automatically. You have to listen for hashchange events, and manually set the active tab. Here's an approach that might work for you:

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

The above code will provide a handler for the create event. Then, we get the actually widget instance using data(). Next, we setup a handler for the hashchange event. This is triggered whenever one of our external links is clicked. This handler will set the active tab based on the current location.hash value.

We're using _getIndex(), an internal tabs method to figure out the index of the active tab, based on the hash value. Despite being an internal method, it's a good shortcut in this context.

Here's an example.

这篇关于JqueryUI 1.11选项卡在同一页面上直接链接到选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！