# jQuery Mobile 導航欄 ## jQuery Mobile 導航欄 導航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部內。 默認情況下，導航欄中的鏈接將自動變成按鈕（不需要 data-role="button"）。 使用 data-role="navbar" 屬性來定義導航欄： ## 實例 ``` <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#anylink">首頁</a></li> <li><a href="#anylink">頁面二</a></li> <li><a href="#anylink">搜索</a></li> </ul> </div> </div> ``` >  > 默認情況下，按鈕的寬度與它的內容一樣。使用一個無序列表來平均地劃分按鈕的寬度：1 個按鈕占 100% 寬度，2 個按鈕則各占 50% 的寬度，3 個按鈕則每個占 33,3% 的寬度，依此類推。然而，如果您在導航欄中指定了超過 5 個按鈕，將會拆成多行（查看"更多實例"）。 ## 激活按鈕 當導航欄中的某個鏈接被點擊，它將獲得被選中（按下）的外觀。 如果想在不點擊鏈接時獲得這種外觀，請使用 class="ui-btn-active"： ## 實例 ``` <li><a href="#anylink" class="ui-btn-active">首頁</a></li> ``` 對于多個頁面，您可能想要每個按鈕的選中外觀代表當前用戶所在的頁面。要做到這一點，請添加 "ui-state-persist" 和 "ui-btn-active" 到鏈接的 class： ## 實例 ``` <li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li> ``` ## 更多實例 [內容中的導航欄](/try/try.php?filename=tryjqmob_navbars_content) 如何在 data-role="content" 內添加導航欄。 [尾部中的導航欄](/try/try.php?filename=tryjqmob_navbars_footer) 如何在尾部內添加導航欄。 [導航欄中的定位圖標](/try/try.php?filename=tryjqmob_navbars_footer_icons) 如何在尾部內的導航欄中定位圖標。 [超過 5 個按鈕](/try/try.php?filename=tryjqmob_navbars_wrap) 導航欄中 10 個按鈕的演示。