Jquery Tab 从选项卡中的内容链接到另一个选项卡答案

【问题标题】：Jquery Tab link to another tab from content within a tabJquery Tab 从选项卡中的内容链接到另一个选项卡
【发布时间】：2012-02-06 17:47:37
【问题描述】：

我正在使用 JQuery 选项卡插件。

我想链接标签 1 中的内容以将我带到标签 3，而不必单击标签 3 来访问它。我该怎么做？

@redsquare...所以，我根据您的建议对其进行了修改，这样我就可以使所有选项卡相互交互。此更改有效，再次感谢，所以我想我想知道是否有更好的编写方式或者这是最好的方式？

最新更改的演示：http://jsbin.com/etoku3/

<script type="text/javascript"> 
    $(document).ready(function() {
        var $tabs = $("#container-1").tabs();
          $('a.tab1').click(function(){$tabs.tabs('select', 0);});
          $('a.tab2').click(function(){$tabs.tabs('select', 1);});
          $('a.tab3').click(function(){$tabs.tabs('select', 2);});
          $('a.tab4').click(function(){$tabs.tabs('select', 3);});
          $('a.tab5').click(function(){$tabs.tabs('select', 4);});
    });
</script>

【问题讨论】：

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

【解决方案1】：

你需要Tabs select method

例如

$('#anchor').click( function(){

  $('#tabs').tabs( "select" , 2 )

});

使用您的标记进行演示 here

【讨论】：

非常有趣！我更新了我的帖子以反映您的建议。我希望真正让所有选项卡从任何选项卡中相互交互，而不仅仅是单个选项卡。
天哪，我想你明白了！现在这是一些链接标签交换！
第二期出现了，有没有办法让标签页也把焦点带到页面顶部？请看，在此示例中，jsbin.com/etoku3/11 当您向下滚动并单击链接时，您会注意到选项卡确实会切换，但不会将您带到页面顶部以查看内容的顶部。跨度>

【解决方案2】：

$('#tabs').tabs({ selected: "#tabs-1" });

【讨论】：

【解决方案3】：

如果链接要经常出现，可以使用以下设计：

<script lang="text/javascript">
$('.tablink').live( 'click', function(){
  $('#container-1').tabs('select', $(this).attr('rel'));
});
</script>

并在正文中有以下链接：

<span class="tablink" rel="2">Link to tab 2</span>

或

<a href="" class="tablink" rel="2">Link to tab 2</a>

【讨论】：

这不起作用，因为选项卡小部件阻止链接传播到现场监听的主体
另外，在我们的 cms 中，我无法在链接属性中使用 rel。

【解决方案4】：

语义解决方案：

$(document).ready(function() {
$('a.directTab').click( function(){
    var tabWanted = $(this).attr('rel').split('-')[1];
    $('#container-1').tabs( "select" , tabWanted);
    });
});

如果你对“click”单独事件有问题，可以使用“live”。

对于链接，您将“rel”属性替换为所需的选项卡：

<a class="directTab" rel="fragment-3">want this text</a> to link to tab 3

否则试试这个显眼的代码：

<a onclick="$('#container-1').tabs('select', 2);">want this text</a> to link to tab 3

【讨论】：

【解决方案5】：

$("#your button or what uou want to clivk").live('click',function()
    {

         $('#tabs').tabs({ selected: "#tabs-1" });
    });

在此代码中，它指向选项卡 1。您可以使用 #tabs-2 或 #tabs-3。您要打开哪个标签。

【讨论】：