Question

我有菜单TABS STRUCTURE：

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

TASK ：我需要自动切换位置到选定选项卡中的第一个链接。因此，当我单击第二个选项卡时，页面将重新加载，并将显示已打开的第二个选项卡，其中包含选定的第一个链接（tab2_link1.html）。

我找到了solution，它使标签成为一个活动的链接，但是如果tab是空div，我需要激活标签内容的链接，所以这不能解决我的任务。

Answer 1

选择选项卡时会触发“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/

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

Answer 2

添加侦听器执行select事件，并在此函数中设置location.href，然后重新加载浏览器。

Answer 3

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

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

} );

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

NEWTAB

刚刚启动的标签页。

oldTab

刚刚停用的标签。

newPanel

刚刚启动的面板。

oldPanel

刚刚停用的面板。

所以最终代码看起来像这样

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

JqueryUI选项卡 - 需要在选择选项卡上更改URL

3 个答案: