jQuery Mobile 是一個用于移動端 Web 應用的開源框架,它能夠幫助我們快速地構建移動 Web 應用。實現 tab 功能是 jQuery Mobile 中常用的一個功能,下面就讓我們通過代碼來實現一個簡單的 tab:
首先我們需要創建一個具有 data-role="tabs" 屬性的 div 元素,表示這是一個 tab 組件。然后在 div 元素內部,我們需要創建一個控制 tab 切換的導航條,并在導航條中創建若干個列表項,每個列表項都應該帶有一個 a 元素,href 屬性指向對應的 tab 內容的 id 值,同時要添加 data-ajax="false" 屬性,這樣點擊 a 元素時就不會用 AJAX 加載對應的內容了。
接下來,我們就可以在 div 元素內部創建若干個帶有 id 屬性的 div 元素,每個 div 元素內都可以寫入對應 tab 內容。而這些 div 元素的 id 值應該和導航條的列表項中的 href 屬性對應起來,這樣才能實現 tab 內容的切換。
最后,我們需要在導航條中給默認項添加一個 class="ui-btn-active",這樣頁面加載時默認會顯示對應的 tab 內容。