使用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. jquery 、 JS 脚本参数的认识与使用

    jquery . JS 脚本参数的认识与使用 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. par ...

  2. 反向Ajax，实现服务器向客户端推送消息之 Comet

    基于 HTTP 长连接.无须在浏览器端安装插件的“服务器推”技术为“Comet”. 下面将介绍两种 Comet 应用的实现模型. 基于 AJAX 的长轮询(long-polling)方式 AJAX 的 ...

  3. android 自定义view -- 实现自定义 邮箱验证的Edittext

    //onFinishInflate 当View中所有的子控件均被映射成xml后触发 /** * 实现自定义 实现邮箱验证的EidtText */public class CustomEditText ...

  4. input , textarea 边框问题

    一.去掉边框: 看看基本的HTML: 复制代码 代码如下: <div class="wrap"> <input type="text" cla ...

  5. Lua协程

    协作例程 1.同一时刻仅一个例程在运行 2.执行权让渡和恢复[栈]

  6. 一行代码从表中选取N行到另一个表

    private void Form1_Load(object sender, EventArgs e) {            DataTable dt = new DataTable();     ...

  7. pike实现

    快速略读了一下源码,记了一些东西,防老年痴呆.由于整体的源码还没有看得很清楚,所以可能有大量的错误. 首先拿mapping开刀 mapping其实就是C++中的multimap,但是支持更多. arr ...

  8. dk.internal.org.objectweb.asm.Opcodes.IF_ACMPNE

    http://cr.openjdk.java.net/~hannesw/8008351/webrev/src/jdk/nashorn/internal/codegen/Condition.java.s ...

  9. cookie,session,sessionid

    cookie,session,sessionid http协议是无状态的,意思是每次请求的状态不会保存.因此,产生了cookie,session之类保存会话状态的机制.1.什么是cookiecooki ...

  10. 037. asp.netWeb用户控件之五使用用户控件实现文件上传功能

    fileUpload.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile= ...