jQuery 选项卡 - 获取新选择的索引答案

【问题标题】：jQuery tabs - getting newly selected indexjQuery 选项卡 - 获取新选择的索引
【发布时间】：2010-09-16 03:51:46
【问题描述】：

我之前使用jquery-ui tabs 扩展通过ajax 加载页面片段，并在页面中隐藏或显示隐藏的divs。这两种方法都有很好的文档记录，我没有遇到任何问题。

然而，现在我想用标签做一些不同的事情。当用户选择一个选项卡时，它应该完全重新加载页面 - 原因是每个选项卡部分的内容渲染起来有点贵，所以我不想一次全部发送并使用正常方法切换“显示：无”以显示它们。

我的计划是拦截选项卡的select 事件，并通过操作 document.location 让该功能重新加载页面。

如何在select 处理程序中获取新选择的选项卡索引及其对应的html LI 对象？

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

是否有我可以读取的事件或 ui 对象的属性将给出新选择的选项卡或其中的锚标记的索引、ID 或对象？

或者有没有更好的方法来使用标签来重新加载整个页面？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins jquery-ui-tabs

【解决方案1】：

我会看看events 的标签。以下内容来自 jQuery 文档：

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     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
 });

看起来 ui.tab 是要走的路。

【讨论】：

【解决方案2】：

在 jQuery UI - v1.9.2 中

ui.newTab.index()

获取活动标签的基数为 0 的索引

【讨论】：

【解决方案3】：

select: function(e, ui){var index=ui.index;}

对我来说效果很好。见：http://api.jqueryui.com/tabs/#events

【讨论】：

@Ghommey：差不多 2 年后，这个答案对我仍然有用。
@MichaelBorgwardt 嗯，这很酷 :) 但是 Klaus 和 Matt 在 2 年前给出了类似的答案。

【解决方案4】：

谢谢，jobscry - 你指出的 'ui.tab' 给了我点击的锚标签，我可以从中提取它的类、id、href 等...我选择使用 id 来编码我的 url。我的最终 tabs() 调用如下所示：

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});

【讨论】：

【解决方案5】：

或者我为我的网站使用的另一个选项是这个。它是一个基本的 UL/Div 选项卡导航系统。单击指向带有哈希标记的另一个页面的链接时触发正确选项卡的关键是通过简单地通过您的 UL 过滤与通过浏览器传递的内容相匹配的 #example。就是这样。

这是 HTML 示例：

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

还有实现它的 Jquery：

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

这应该会为您解决。我知道这不是最干净的代码，但它会让你到达那里。

【讨论】：

【解决方案6】：

在我的实现中，它的工作方式如下：

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});

【讨论】：

【解决方案7】：

我确实找到了两种方法来完成这个要求，因为我很难把代码放在这里，你可以在http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html看看它

希望对某人有所帮助..

【讨论】：

【解决方案8】：

快速查看文档为我们提供了解决方案：

$('#edit_tabs').tabs({ selected: 2 });

上述语句将激活第三个标签。

【讨论】：