使用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. 在服务器端将XML转换成HTML

    以下是在服务器上转换XML文件所需要的简单源代码: <% 'Load the XML set xml = Server.CreateObject("Microsoft.XMLDOM&q ...

  2. MFC学习笔记（一）向模态对话框传递数据

    声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDi ...

  3. js中的Bom对象模型

    Bom可以对浏览器的窗口进行访问和操作.使用Bom,开发者可以移动窗口,改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. window对象: 1.窗口操作 其中moveTo,moveBy是窗 ...

  4. Fragment的初步设计

    Fragment的初步设计 Fragment功能 Fragment将每一段碎片时间归类到一个具体的事件上: 使用者可以创建多个事件对碎片时间进行分类: 使用者点击事件会进入用户自己设置好的事件对应的A ...

  5. A strange lift_BFS

    Problem Description There is a strange lift.The lift can stop can at every floor as you want, and th ...

  6. iOS-UILabel自适应高、宽

    UILabel自适应高 UILabel自适应宽

  7. block的语法

    主要内容: 1. 开始使用block(Getting Started with Blocks) 2. block概念综述(Conceptual Overview) 3. 声明和创建block(Decl ...

  8. MATLAB与C/C++混合编程的一些总结

    [转载请注明出处]http://www.cnblogs.com/mashiqi 先上总结: 由于C/C++语言的函数输入输出参数的特点,可以将多个参数方便地传入一个函数中,但却不能方便地返回多个参数. ...

  9. [转]设置Android手机以使用ARM Streamline进行性能分析（一）

    本博客第一次转载的文章,原文访问不到了,这篇是从google cache里挖出来的,为有需要的同学准备.原文地址     Posted by Fang Bao,(鲍方) 4 Comments 11 J ...

  10. WOJ-1097

    Description JYY has placed N bombs on the plane. We assume that the firepower area of each bomb is c ...