jQuery选项卡 – 获取新选择的索引

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

但是，现在我想用标签做一些不同的事情。 当用户选择一个标签时，它应该完全重新加载页面 – 原因是每个标签部分的内容渲染起来有些昂贵，所以我不想一次性发送它们并使用普通方法切换’display：none’以显示它们。

我的计划是截取选项卡的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或对象或其中的锚标记？

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

Answer 1

我会看一下Tabs的事件 。 以下内容摘自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是要走的路。

Answer 2

在jQuery UI中 – v1.9.2

 ui.newTab.index() 

获取活动选项卡的基数为0的索引

Answer 3

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

适合我。 请参阅： http ： //api.jqueryui.com/tabs/#events

Answer 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(); }); 

Answer 5

或者我用于我的网站的另一个选项是这个。 它是一个基本的UL / Div标签导航系统。 单击指向附加了哈希标记的其他页面的链接时触发正确选项卡的关键是简单地通过UL过滤匹配通过浏览器传递的#example。 就像这样。

以下是HTML示例：

  
 
 
Send a message
 
Share a file
 
Arrange a meetup
 
 
 
 
 
Lorem ipsum dolor sit amet.
 
 
 
Sed do eiusmod tempor incididunt.
 
 
 
Ut enim ad minim veniam
 
  

和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(); }); }); 

那应该照顾你。 我知道这不是最干净的代码，但它会在那里得到你。

Answer 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(); }); 

Answer 7

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

希望有人帮助..

Answer 8

快速浏览文档为我们提供了解决方案：

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

以上语句将激活第三个选项卡。