1

我有菜单标签结构：

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

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

4

3 回答 3

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/

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

于 2012-05-16T14:51:50.497 回答
0

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

于 2012-05-16T09:20:14.223 回答
0

选项卡选择事件在 JQuery 1.9+ 中被丢弃，如此处所述。要使用 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');
} );
于 2013-07-30T09:42:39.150 回答