使用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. [Weekly] 2014.03.01-2014.03.08

    这周写过好多东西,虽然还没有完全弄明白线段树,但是progress还是有的! 不过有时候真的很想哭,因为自己的梦想连别人看看韩剧.无所事事还要分量轻,实在不明白政治课的Teamwork意义何在,花两分 ...

  2. Android - PopupWindow

    PopupWindow就是一个可以显示在当前界面上的浮动容器,它可以用来显示任意一个View,同时还可以指定显示的位置. 下面写一个显示下拉的例子: PopupWindow mpopupWindow; ...

  3. MagicalRecord的使用(第三方库实现的数据库)

    MagicalRecord:http://cocoadocs.org/docsets/MagicalRecord/2.1/ 安装: 1.新建一个工程,注意不要勾选 Core Data. 2.利用Coc ...

  4. OC之160728

    NSData与NSMutableData:代表数据缓冲区有两个作用,将数据读入NSData和输出NSData数据 输出 将字符串写入指定文件 用NSFileManager:为创建,删除,移动,复制文件 ...

  5. Allegro建立引脚封装概念名词梳理

    首先感谢于博士的60讲的Cadence教学视频,老师讲的还是很有耐心,很细致,谢谢! 目前还只是看到建立PCB封装这一块,正好手头上有个案子在做,边做边学的进度还是要好很多.以前的工作对原理图这一块的 ...

  6. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  7. 多线程 or 多进程？[转]

    在Unix上编程采用多线程还是多进程的争执由来已久,这种争执最常见到在C/S通讯中服务端并发技术的选型上,比如WEB服务器技术中,Apache是 采用多进程的(perfork模式,每客户连接对应一个进 ...

  8. java学习第十一天

    第十二次课 目标 一维数组(创建访问) 一.概念与特点 1.概念 相同数据类型的有序集合[] 数组名: 容器的名字 元素:  下标变量,数组名[下标] 长度:  length 下标:   位置.索引  ...

  9. 对弈类游戏的人工智能(5)--2048游戏AI的解读

    前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...

  10. LeetCode 【46. Permutations】

    Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...