如何用jQuery做選項卡介面

選項卡式介面是本地案頭應用較大的UI組件之一。 幸運的是, jQueryUI 使它們很容易實現。 下面是如何讓它們迅速啟動並正常運行。

HTML的基本結構如下:

<div id="tab_wrapper">       <ul>              <li><a href="#tab1">Tab 1</li>              <li><a href="#tab2">Tab 2</li>       </ul>       <div id="tab1">              Tab 1 content here...       </div1>       <div id="tab2">              Tab 2 content here...       </div1></div>

通過單一ID的div指定這些錨變成標籤,標籤的列表將會在網頁選項卡顯示。當使用者單擊連結時,它將選擇該選項卡。 只有短短的一行jQuery代碼可以把這個HTML轉換為選項卡式介面:

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

多簡潔的代碼！ 我們甚至可以實現更進一步的功能。 該文檔展示了較全功能 ,但我認為最有用的還是從外部來源載入資料。 通過使用的錨點到另一個頁面的ID,而不是螢幕上一個項目,點擊選項卡時它會自動載入資源，內容將通過AJAX載入。 示範代碼所示 ,你可以很容易地在有回退功能的伺服器上處理錯誤。