如何讓jQuery UI選項卡直接加載URL /頁面？

Question

我有一組選項卡，其中href是我希望在選中選項卡時加載的URL。

繼文檔之後，我添加了以下選擇選項。

$('#example').tabs({ 
select: function(event, ui) { 
var url = $.data(ui.tab, 'load.tabs'); 
if(url) { 
location.href = url; 
return false; 
} 
return true; 
} 
}); 

在每個頁面（ASP.NET主頁）的頂部上的標籤<script>。

頁面加載，但從未直觀地選擇標籤，即，即使顯示標籤＃3的內容，也總是選擇第一個標籤。

在FireBug中追蹤上面的腳本，一旦location.href=url被執行，新頁面加載並且返回語句從不執行。這是一個問題嗎？

感謝

附加信息 只是想澄清，我不是試圖加載通過Ajax選項卡的內容，但需要做回發。結合回發，我希望讓點擊的標籤成爲選定的標籤。另外，上面的例子來自jQueryUI/Tabs頁面上的第3.6節。

Answer 1

在上述追蹤在 螢火腳本，一旦放在location.href =網址是 執行新的頁面加載，並且永遠不會執行 return語句。 這是一個問題嗎？

在你做了location.href=url之後，你離開頁面並停止執行當前代碼。

從您的代碼中，您無法知道當前選擇哪個頁面。您需要將CSS選擇器添加到指示或通過AJAX加載內容的當前元素。

---

選擇當前標籤：

你需要知道的第一件事是哪個頁面對應的選項卡。由於您尚未提供此類信息，我只會假定該網址具有定義選定選項卡的參數tab。

您需要提供currenttab指數在ASPX（TODO：驗證查詢字符串）：

<%= string.Format("var currentTab = {0};", Request.QueryString["tab"]) => 

而在你的JavaScript中使用此代碼：

$('#example').tabs({ 
    selected: currentTab || 0, 
    select: function(event, ui) { 
    var url = $.data(ui.tab, 'load.tabs'); 
    if(url) { 
     location.href = url + "?tab=" + ui.index; 
     return false; 
    } 
    return true; 
    } 
}); 

但請：

請注意，在新的 窗口中打開標籤是意想不到的，例如 不一致的行爲暴露 易用性問題 （http://www.useit.com/alertbox/tabs.html）。

---

TO LOAD TAB通過Ajax：

我不知道在那裏你可以找到你在jQuery的文檔發佈的代碼，但是這是不正確的。

按照docs：

標籤支持以不顯眼的方式經由 Ajax的裝載片內容。

你需要的HTML稍微 從用於 靜態選項卡上的一個不同：鏈接 指向現有資源表（從 其中內容被載入），並在沒有 額外的容器全部 （不顯眼！）。集裝箱的標記 將是動態創建：

所以HTML應該是：

<div id="example"> 
    <ul> 
     <li><a href="ahah_1.html"><span>Content 1</span></a></li> 
     <li><a href="ahah_2.html"><span>Content 2</span></a></li> 
     <li><a href="ahah_3.html"><span>Content 3</span></a></li> 
    </ul> 
</div> 

和JavaScript應該是：

$(function() { 
    $("#example").tabs(); 
});