使用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. 最简单的一个Oracle定时任务

    最简单的一个Oracle定时任务一.在PLSQL中创建表:create table HWQY.TEST(CARNO     VARCHAR2(30),CARINFOID NUMBER) 二.在PLSQ ...

  2. ubuntu13.04 nfs配置

    开发板和主机之间共享文件,常常需要配置nfs服务: 服务器端安装:root#:apt-get install nfs-common root#:apt-get install nfs-kernel-s ...

  3. Python学习路程day8

    Socket语法及相关 socket概念 A network socket is an endpoint of a connection across a computer network. Toda ...

  4. 【Android】配置APK开发环境

    1.安装java jdk去oracle公司下载jdk-7u15-windows-i586.exehttp://www.oracle.com/technetwork/cn/java/javase/dow ...

  5. 在 C++ 代码中使用 UE4 插件---Using a plugin in C++ code

    例如使用 CustomMeshComponent 插件 在Build.cs 文件 中 添加以下两行代码 如图可配置路径,可解决#include "CustomMeshComponent&qu ...

  6. WCF 服务器调用回调函数 单程-双程操作模式：(待补充Demo)

    服务器端Server 实现回调接口Interface定义.客户端实现回调接口Interface实现,从而实现服务器端通过  var channel = OperationContent.Current ...

  7. Visual Studio 2012+jQuery-1.7.1

    今天用Visual Studio 2012开发一个网站项目,在集成jqplot图表控件并进行调试的时候(使用的是MVC4框架),加载网页绘制图表的时候总是报错(提示$.jqplot.barRender ...

  8. Java数据结构和算法之递归

    四.递归 递归是函数调用自身的一种特殊的编程技术,其应用主要在以下几个方面:   阶乘 在java当中的基本形式是: Public  void  mothed(int n){//当满足某条件时: Mo ...

  9. Ubuntu12.04安装vscode i386

    最近在Ubuntu12.04的32位版本上安装vscode,我下载的是32位deb包,  vscode官网 安装命令 sudo dpkg -i vscode-i386.deb 安装完成没有报错,但是点 ...

  10. dedecms搜索框制作

    <form method=" name="kwtype"> <table width="> <tr> <td widt ...