jQuery Mobile - 为选项卡使用导航栏
描述
要为选项卡使用导航栏，您可以在选项卡内声明导航栏。
示例
下面的示例演示了在 jQuery Mobile 中使用选项卡的导航栏。
<!DOCTYPE html>
<html>
<head>
<title>Use navbar for tabs</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.tablist-left {
width: 25%;
display: inline-block;
}
.tablist-content {
width: 60%;
display: inline-block;
vertical-align: top;
margin-left: 5%;
}
</style>
</head>
<body>
<div data-role = "tabs" id = "tabs">
<div data-role = "navbar">
<ul>
<li><a href = "#one" data-ajax = "false">Tab one</a></li>
<li><a href = "#two" data-ajax = "false">Tab two</a></li>
<li><a href = "/jquery_mobile/src/tabs_navbars2.html"
data-ajax = "false">Tab three</a></li>
</ul>
</div>
<div id = "one" class = "ui-body-d ui-content">
<h1>This is first tab contents.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
</div>
<div id = "two">
<ul data-role = "listview" data-inset = "true">
<li><a href = "#">Audi</a></li>
<li><a href = "#">Hyundai</a></li>
<li><a href = "#">Honda</a></li>
</ul>
</div>
</div>
<h2>Use inset listview for tabs</h2>
<div data-role = "tabs">
<ul data-role = "listview" data-inset = "true" class = "tablist-left">
<li><a href = "#one" data-ajax = "false">one</a></li>
<li><a href = "#two" data-ajax = "false">two</a></li>
<li><a href = "tabs_navbars2.html" data-ajax = "false">three</a></li>
</ul>
<div id = "one" class = "ui-body-d tablist-content">
<h1>First tab contents</h1>
</div>
<ul id = "two" class = "tablist-content" data-role = "listview"
data-inset = "true">
<li><a href = "#">Audi</a></li>
<li><a href = "#">Hyundai</a></li>
<li><a href = "#">Honda</a></li>
</ul>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 tabs_navbars.html 文件。
将此 HTML 文件打开为 http://localhost/tabs_navbars.html，将显示以下输出。
