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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css">

         <script src="js/jquery-1.6.4.js"></script>

         <script src="js/jquery.mobile-1.0.1.js"></script>

         <script>

             $(document).ready(function() {

                 initTabView();

             });

             function initTabView()

             {

                 $('.tab-item-content').hide();

                 $('.tab-item-content:first').show();

                 $('.tab-header li:first a').addClass('active-tab');

                 $('.tab-item-header').click(function(){

                     $('.tab-item-header').each(function(){

                         $(this).removeClass('active-tab');

                     });

                     $(this).addClass('active-tab');

                     var index = $(this).parent().index() + 1;

                     $('.tab-item-content').hide();

                     $('.tab-item-content:nth-child(' + index + ')').show();

                 });

             }

         </script>

         <style type="text/css">

             .tab-view:

             {

                 width:90%;

                 margin:0 auto;

                 padding:0;

             }

             .tab-header, .tab-content

             {

                 list-style:none;

                 width:100%;

                 margin:0 auto;

                 padding:0;

             }

             .tab-content

             {

                 border:1px solid blue;

                 border-bottom-left-radius:10px;

                 border-bottom-right-radius:10px;

                 border-top-right-radius:10px;

             }

             .tab-header li

             {

                 display:inline;

                 margin:0;

                 padding:0;

             }

             .tab-item-header

             {

                 width:auto;

                 padding-left:5px;

                 padding-right:5px;

                 border:1px solid blue;

                 border-top-left-radius:10px;

                 border-top-right-radius:10px;

                 background-color:gray;

             }

             .active-tab

             {

                 background-color:yellow;

             }

         </style>

     </head>

     <body>

         <div data-role="page">

             <div data-role="header" data-position="fixed" data-theme="b">

                 <h1>header</h1>

             </div>

             <div data-role="content">

                 <div class="tab-view">

                     <ul class="tab-header">

                            <li><a class="tab-item-header">cpu1</a></li>

                            <li><a class="tab-item-header">cpu2</a></li>

                            <li><a class="tab-item-header">cpu3</a></li>

                            <li><a class="tab-item-header">cpu4</a></li>

                     </ul>

                     <ul class="tab-content">

                         <li class="tab-item-content">

                             <div style="90%; margin:0 auto;">

                                 <label for="name">姓名：</label>

                                 <input type="text" id="name">

                                 <label for="pass">密码：</label>

                                 <input type="text" id="pass">

                             </div>

                         </li>

                         <li class="tab-item-content">

                                <div  style="90%; margin:0 auto;">

                                 <label for="select">选择</label>

                                    <select>

                                        <option>1</option>

                                     <option>2</option>

                                     <option>3</option>

                                     <option>4</option>

                                     <option>5</option>

                                    </select>

                                </div>

                         </li>

                         <li class="tab-item-content">

                                <p>3</p>

                         </li>

                         <li class="tab-item-content">

                                <p>4</p>

                         </li>

                     </ul>

                 </div>

             </div>

             <div data-role="footer" data-position="fixed"  data-theme="b">

                 <h1>footer</h1>

             </div>

         </div>

     </body>

 </html>

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

使用CSS和jQuery实现tab页的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. JQuery实现tab页

    用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...

  3. 用纯CSS实现优雅的tab页

    说明 又是一个练手的小玩意儿,本身没什么技术含量,就是几个不常用的CSS3特性的结合而已. 要点 Label标签的for属性 单选框的:checked伪类 CSS的加号[+]选择器 效果图 原理 通常 ...

  4. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  6. jquery validate 之多tab页同时校验问题

    1.设置多tab页同时校验: $("form").validate({ignore: ":hidden", ignore: ""}); 由于 ...

  7. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  8. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  9. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

随机推荐

  1. Asp.net MVC 视图（二）

    Razor视图引擎 使用C#语法的Razor视图文件扩展名为.cshtml:使用Visual Basic语法的Razor视图文件扩展名为.vbhtml.文件扩展名指出了Razor语法分析器的编码语言的 ...

  2. Wince 6.0 窗口最大化显示

    在InitDialog用如下代码实现: CRect   m_FullScreenRect;   //全屏区域 CRect   WindowRect; GetWindowRect(&Window ...

  3. Java的内部类

    Java的内部类 首先我们来了解一下什么是内部类? 内部类是指在一个外部类的内部再定义一个类.内部类可以是静态static的,也可用public,default,protected和private修饰 ...

  4. python多线程监控指定目录

    import win32file import tempfile import threading import win32con import os dirs=["C:\\WINDOWS\ ...

  5. Android Sudoku应用挂掉的问题

    在真机上测试数独游戏时发现,快速点击屏幕时,游戏偶尔出现挂死的情况,Log如下 04-08 15:35:00.838 7317-7356/org.elvalad.sudoku D/OpenGLRend ...

  6. windows核心编程---第七章 用户模式下的线程同步

    用户模式下的线程同步 系统中的线程必须访问系统资源,如堆.串口.文件.窗口以及其他资源.如果一个线程独占了对某个资源的访问,其他线程就无法完成工作.我们也必须限制线程在任何时刻都能访问任何资源.比如在 ...

  7. RSS(Residual Sum of Squares)的自由度为什么是n-1呢

    [转载请注明出处]http://www.cnblogs.com/mashiqi 在回归问题中,偶尔我们会遇到求方差的估计的情况.举了例子,我们常常通过Gaussian分布${\cal N}(\mu , ...

  8. python数据结构与算法——图的广度优先和深度优先的算法

    根据维基百科的伪代码实现: 广度优先BFS: 使用队列,集合 标记初始结点已被发现,放入队列 每次循环从队列弹出一个结点 将该节点的所有相连结点放入队列,并标记已被发现 通过队列,将迷宫路口所有的门打 ...

  9. LintCode Search For a Range (Binary Search)

    Binary Search模板: mid 和 target 指针比较,left/ right 和 target 比较. 循环终止条件: 最后剩两数比较(while(left + 1 < righ ...

  10. 2015GitWebRTC编译实录15

    各个库编译完成后,整合talkapp,联编时还是碰到了一些问题,主要是lib里的源码文件被错误移走,或者宏定义等有问题的,不一而足 FQ访问https://apprtc.appspot.com/,拿到 ...