jQuery Mobile (七) 上下导航栏

最新推荐文章于 2022-02-03 23:44:10 发布

游可

最新推荐文章于 2022-02-03 23:44:10 发布

阅读量1k

点赞数

分类专栏： jQuery Mobile 文章标签： jQuery Mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/14001485

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

直接看代码：

<!DOCTYPE html>
<html>
<head>
   <title>导航栏</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, 
          initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

  

</head>
<body>
  
　<div data-role="page">  
    <div data-role="header">  
        <div data-role="navbar">
            <ul>
  
               <li><a href="#">武汉</a></li>
                <li><a href="#">上海</a></li>
                 <li><a href="#">北京</a></li>

            </ul>


        </div>
    </div>      
    <div data-role="content">  

      <p>
         这里是内容.....
      </p>
  
    </div>    
    
  <!-- tab bar with custom icons -->
  <div data-role="footer" class="ui-navbar-custom" data-position="fixed">
    <div data-role="navbar" class="ui-navbar-custom">
      <ul>
        <li><a href="#" id="home" data-icon="custom">Home</a></li>
        <li><a href="#" id="movies" data-icon="star" class="ui-btn-active">Movies</a></li>
        <li><a href="#" id="theatres" data-icon="gear">Theatres</a></li>
      </ul>   
    </div>
  </div>  

</body>
</html>

class="ui-btn-active"

表示选中状态

游可

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile (七) 上下导航栏

导航栏 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
复制链接

扫一扫