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,但一旦我打开网站,就不可能添加新的链接和新的选项卡)。
这将使最终用户无法切换选项卡,链接也无法正常工作。
代码(尽管在链接的页面中可以访问)
<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>
不幸的是,选项卡小部件不会自动执行此操作。您必须监听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()
,一种内部选项卡方法,根据哈希值计算活动选项卡的索引。尽管这是一种内部方法,但在这种情况下,它是一条很好的捷径。
下面是一个例子。
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 在新选项卡中打开链接,但不使用_blank方法
- 打开选项卡中的链接
- JQuery-停止手风琴链接关闭所有选项卡
- 文本链接可更改引导程序选项卡
- <中的链接;选择>下拉选项
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何在新选项卡中打开链接以及在当前选项卡中重定向
- 表单上预先选择的选项取决于您的链接'We’’’’来自
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- 如何防止iframe中的链接在新选项卡中打开
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 打开除域之外在新选项卡中打开的所有外部链接
- 单击链接时添加另一个选项
- 如何使用角度材质应用选项卡链接波纹
- 谷歌地图点击链接/选项卡更改标记位置地图
- 如何在分页期间链接回特定的jquery ui选项卡
- 选项卡中的a href链接没有执行任何操作
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接