Jquery選項卡：打破創建 - 選擇 - 重新加載循環

我有一個使用Jquery選項卡的頁面。這些選項卡不僅決定了我想在選項卡內容區域顯示的內容，還決定了選項卡div外部的內容。Jquery選項卡：打破創建 - 選擇 - 重新加載循環

我想要的行爲是，當用戶選擇一個選項卡時，使用url中的新參數重新加載整個頁面。（我目前套結串location.href，從而迫使該頁面重新加載做到這一點。

select: function(event, ui) { 
    // ... determine new_url 
    location.href = new_url; 
}

當重新加載頁面，我想正確的選項卡來激活/選擇，我嘗試做通過檢測參數的標籤。

create: function(event, ui) { 
    // ... figure out which tab should be selected 
    $('.tabs').tabs('select', tab_index); 
}

我注意到，這迫使在創建的選項卡的無休止的循環中的瀏覽器，選擇標籤，重新加載，創建的選項卡，選擇標籤...等。有沒有辦法打破這個？

我知道JQuery標籤不適合這種工作但幫助將不勝感激！這是我第一次嘗試JQuery選項卡。

一些額外的筆記： - 我正在使用Rails的一些邏輯 - 我試圖'應用狀態'活躍'類到應該被選中的標籤，似乎被覆蓋。首先，將第一個選項卡（索引0）設置爲活動狀態，然後在選項卡創建功能中，選擇要選擇的選項卡。

<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>"> 
    <a href="#tab-<%= type.downcase %>">tab 1</a> 
</li>

來源

2012-07-31 Ji Mun

你可以發佈一個小提琴或演示頁面與自包含的例子嗎？ – fcalderan 2012-07-31 19:12:36

我不認爲JSFiddle還支持JQuery 1.8。我會嘗試查看是否可以創建單獨的演示頁面。 – 2012-07-31 19:22:42

你不能（或不應該）混合，每一個用戶與那些只顯示/隱藏一些內容的變化選項卡時重新加載頁面的標籤。我建議堅持兩種方法之一。如果你想要改變頁面頁面，可以顯示/隱藏兩個標籤和其他內容，或者添加新內容並替換舊的頁面。或者，你可以這樣做以下：
HTML：

<div class="tabs"> 
    <span class="tab-head active">Tab 1</span> 
    <div class="tab-content active">Lorem ipsum...</div> 
    <span class="tab-head">Tab 2</span> 
    <div class="tab-content">Lorem ipsum...</div> 
    <span class="tab-head">Tab 2</span> 
    <div class="tab-content">Lorem ipsum...</div> 
</div>

CSS：

.tabs {overflow: auto;} 
.tab-head {display: inline-block; float:left;} 
.tab-content {display:none;} 
.tab-content-active {display:block;}

JS：

$(".tabs .tab-head").click(function(){ 
    $(".tab-content,.tab-head",$(this).parent()).removeClass("active"); 
    $(this).addClass("active"); 
    $(this).next(".tab-content").addClass("active"); 
});

這大概是我的另一個網站做了幾個月前。

編輯：我目前正在研究一種方法，通過傳遞URL的fragment_id一部分數據，這樣的分配到每一個焊接設備的初始製表位置：page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;，其中#tabs=0:1,2:6;是重要的組成部分。我有一個onload處理程序解析，以顯示正確的標籤形式的開始和一些JS，尋找指向具有不同標籤信息的同一頁面的鏈接。

來源

2012-07-31 19:32:17

我採取了這種方法，通過修改選項卡的類名稱，而不是調用選項卡選擇，它看起來像它的工作。謝謝！！ – 2012-07-31 19:57:52

Jquery選項卡：打破創建 - 選擇 - 重新加載循環

回答

相關問題