jquery mobile navbar

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 </head>
10 <body>
11 <div data-role="navbar"><!-- 导航 -->
12     <ul>
13         <li><a href="#" class="ui-btn-active">one</a></li><!-- 默认选中状态 -->
14         <li><a href="#">two</a></li>
15         <li><a href="#">one</a></li>
16         <li><a href="#">one</a></li>
17     </ul>
18 </div>
19 <div data-role="header">
20     <h1>my head</h1>
21     <div data-role="navbar">
22         <ul>
23             <li><a href="#" class="ui-btn-active">one</a></li><!-- 默认选中状态 -->
24             <li><a href="#">two</a></li>
25             <li><a href="#">one</a></li>
26             <li><a href="#">one</a></li>
27         </ul>
28     </div>
29 </div>
30 <div data-role="header" data-theme="b">
31 <div data-role="navbar">
32     <ul>
33     <li><a href="" data-icon="grid">one</a></li>
34     <li><a href="" data-icon="star">one</a></li>
35     <li><a href="" data-icon="gear">one</a></li>
36     </ul>
37 </div>
38 </div>
39 </body>
40 </html>

原文地址:https://www.cnblogs.com/NB-JDzhou/p/5265440.html