jQuery選項卡 - 獲取新選擇的索引

Question

我以前使用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

我會看看標籤的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是要走的路。

Answer 2

謝謝，jobscry - 你指出的'ui.tab'給了我點擊錨標記，從中我可以提取它的類，id，href等等...我選擇使用id來編碼我的url 。我最後的選項卡（）調用看起來是這樣的：

$(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 3

我在執行

它的工作原理是：

$(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 4

或者我用我的網站的另一種選擇是這樣的。它是一個基本的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(); 

    }); 

}); 

這應該照顧它。我知道這不是最乾淨的代碼，但它會讓你在那裏。

Answer 5

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

適合我。見：http://api.jqueryui.com/tabs/#events

Answer 6

我確實發現了兩種方法來實現這個要求，因爲這是艱難的，我把這裏的代碼，你可以在http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

希望看看它可以幫助別人..

Answer 7

快速查看的文件給我們的解決方案：

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

上面的語句將啓動第三個選項卡。

在jQuery UI的

Answer 8

- v1.9.2的

ui.newTab.index() 

獲得活動標籤的基數爲0的指數