Jquery UI 选项卡 - 需要更改选择选项卡上的 URL答案

【问题标题】：JqueryUI Tabs - need change URL onSelect TabJquery UI 选项卡 - 需要更改选择选项卡上的 URL
【发布时间】：2012-05-23 19:06:45
【问题描述】：

我有菜单标签结构：

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

任务：我需要将位置自动更改为所选选项卡中的第一个链接。因此，当我单击第二个选项卡时，页面将重新加载并显示打开的第二个选项卡，其中包含选定的第一个链接 (tab2_link1.html)。

我找到了solution，它使选项卡成为活动链接，但如果选项卡为空 div，则此方法有效，并且我需要从选项卡的内容激活链接，所以这不能解决我的任务。

【问题讨论】：

澄清一下，您希望第一个链接的内容显示在选项卡上吗？还是只是激活/选择包含该链接的选项卡？
我想激活标签中的第一个链接，它必须重新加载页面，而不是标签内容。在我的情况下，选项卡内容只是带有指向其他站点部分和页面的链接的菜单字符串。

标签： jquery jquery-ui hyperlink tabs jquery-ui-tabs

【解决方案1】：

添加侦听器做选择事件并在此函数中设置 location.href 然后浏览器重新加载。

【讨论】：

@koral - 你只是重申了他的问题，正如我所看到的那样。

【解决方案2】：

选择标签时触发“tabsselect”事件。所以让我们绑定到那个：

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
    //Here we have:
    ui.options // options used to intialize this widget
    ui.tab // anchor element of the selected (clicked) tab
    ui.panel // element, that contains the contents of the selected (clicked) tab
    ui.index // zero-based index of the selected (clicked) tab

所以，在您的情况下，您需要将窗口位置设置为所选选项卡中的第一个锚元素 href url。

window.location.href = $(ui.panel).find('a:first').attr(href);});

鉴于上述情况和您的标记，这将导航到该选项卡上引用的第一个链接位置。

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
    var myhref = $(ui.panel).find('a:first').attr('href');
    alert("Here we go to:"+href);
    window.location.href = href;
});

最终脚本：

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
     window.location.href = $(ui.panel).find('a:first').attr('href');
});

上述示例工作示例：http://jsfiddle.net/PyM7p/

自我注意：当当前页面上只使用第一个链接时，一个选项卡上有多个链接似乎很奇怪。这不是我的页面标记。

【讨论】：

感谢您的解决方案，我会尽快对其进行测试并写下并投票它有帮助！关于您的注意事项：不仅会使用一个。所有将被使用，但是当您选择选项卡时，首先必须激活并加载，而不仅仅是显示组中的链接列表，因为默认行为是。然后，您可以选择此选项卡中的其他链接，手动单击它们。
非常感谢您的解决方案！它自己工作。我遇到了与我的其他任务代码一起使用它的问题，但我决定单独提出这个问题，因为它是另一种类型的问题！
这里是我遇到的冲突问题：stackoverflow.com/questions/10622495/…

【解决方案3】：

选项卡选择事件在 JQuery 1.9+ 中被丢弃，如 here 所述。要使用 jquery 1.9+，你必须这样做

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {

} );

UI 中有以下四个对象。它们都是 Jquery 对象。所以不需要再次包装它们。

新标签

刚刚激活的标签。

旧标签

刚刚停用的选项卡。

新面板

刚刚激活的面板。

旧面板

刚刚停用的面板。

所以最终的代码会是这样的

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {
     window.location.href = ui.newTab.find('a.ui-tabs-anchor').attr('href');
} );

【讨论】：