首页 > 代码库 > 使用CSS和jQuery实现tab页

使用CSS和jQuery实现tab页

2024-07-05 18:58:15   228人阅读

使用jquery来操作DOM是极大的方便和简单，这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法，下面是html文件：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css">
  7         <script src="js/jquery-1.6.4.js"></script>
  8         <script src="js/jquery.mobile-1.0.1.js"></script>
  9         <script>
 10             $(document).ready(function() {
 11                 initTabView();
 12             });
 13             
 14             function initTabView()
 15             {
 16                 $(‘.tab-item-content‘).hide();
 17                 $(‘.tab-item-content:first‘).show();
 18                 $(‘.tab-header li:first a‘).addClass(‘active-tab‘);
 19                 $(‘.tab-item-header‘).click(function(){
 20                     $(‘.tab-item-header‘).each(function(){
 21                         $(this).removeClass(‘active-tab‘);
 22                     });
 23                     $(this).addClass(‘active-tab‘);
 24                     var index = $(this).parent().index() + 1;
 25                     $(‘.tab-item-content‘).hide();
 26                     $(‘.tab-item-content:nth-child(‘ + index + ‘)‘).show();
 27                 });
 28             }
 29 
 30         </script>
 31         <style type="text/css">
 32             .tab-view:
 33             {
 34                 width:90%;
 35                 margin:0 auto;
 36                 padding:0;
 37             }
 38             
 39             .tab-header, .tab-content
 40             {
 41                 list-style:none;
 42                 width:100%;
 43                 margin:0 auto;
 44                 padding:0;
 45             }
 46             
 47             .tab-content
 48             {
 49                 border:1px solid blue;
 50                 border-bottom-left-radius:10px;
 51                 border-bottom-right-radius:10px;
 52                 border-top-right-radius:10px;
 53             }
 54             
 55             .tab-header li
 56             {
 57                 display:inline;
 58                 margin:0;
 59                 padding:0;
 60             }
 61             
 62             .tab-item-header
 63             {
 64                 width:auto;
 65                 padding-left:5px;
 66                 padding-right:5px;
 67                 border:1px solid blue;
 68                 border-top-left-radius:10px;
 69                 border-top-right-radius:10px;
 70                 background-color:gray;
 71             }
 72             .active-tab
 73             {
 74                 background-color:yellow;
 75             }
 76             
 77         </style>
 78     </head>
 79     <body>
 80         <div data-role="page">
 81             <div data-role="header" data-position="fixed" data-theme="b">
 82                 <h1>header</h1>
 83             </div>
 84             <div data-role="content">
 85                 <div class="tab-view">
 86                     <ul class="tab-header">
 87                            <li><a class="tab-item-header">cpu1</a></li>
 88                            <li><a class="tab-item-header">cpu2</a></li>
 89                            <li><a class="tab-item-header">cpu3</a></li>
 90                            <li><a class="tab-item-header">cpu4</a></li>
 91                     </ul>
 92                     <ul class="tab-content">
 93                         <li class="tab-item-content">
 94                             <div style="90%; margin:0 auto;">
 95                                 <label for="name">姓名：</label>
 96                                 <input type="text" id="name">
 97                                 <label for="pass">密码：</label>
 98                                 <input type="text" id="pass">
 99                             </div>
100                                
101                         </li>
102                         <li class="tab-item-content">
103                                <div  style="90%; margin:0 auto;">
104                                 <label for="select">选择</label>
105                                    <select>
106                                        <option>1</option>
107                                     <option>2</option>
108                                     <option>3</option>
109                                     <option>4</option>
110                                     <option>5</option>
111                                    </select>
112                                </div>
113                         </li>
114                         <li class="tab-item-content">
115                                <p>3</p>
116                         </li>
117                         <li class="tab-item-content">
118                                <p>4</p>
119                         </li>
120                     </ul>
121                 </div>
122             </div>
123             <div data-role="footer" data-position="fixed"  data-theme="b">
124                 <h1>footer</h1>
125             </div>
126         </div>
127     </body>
128 </html>

我的思路其实很简单就是根据所选择的header的索引来控制content的可见性，其中颜色、布局这些的比较随便还请见谅，下面是效果图：

 


联系
我们