闲来无事，周末用jQuery写了一个比较精简的Tabs，个别地方可以用到。

截图及代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>tab test</title>

     <style type="text/css">

         *{padding:0;margin:0;}

         ul,li{list-style-type:none;}

         .hide{display:none;}

         .show{display:block;}

         #tabs{width:300px;margin:50px auto 0;}

         #tabs .mt{height:25px;zoom:1;}

         #tabs .mt:after{content:'\20';display:block;clear:both;}

         #tabs .mt .tit{float:left;height:18px;padding:3px 15px;border:1px solid #ddd;border-radius:5px 5px 0 0;margin-right:5px;background:#eee;line-height:18px;text-align:center;cursor:pointer;color:#666;}

         #tabs .mt .curr{position:relative;z-index:1;height:19px;border-color:#ccc;border-bottom:none;background:#fff;color:#333;}

         #tabs .con{height:120px;padding:10px;border:1px solid #ddd;border-radius:0 5px 5px 5px;}

     </style>

     <script type="text/javascript" src="js/jquery-1.6.4-min.js"></script>

 </head>

 <body>

 <div id="tabs" class="m">

     <div class="mt">

         <ul>

             <li class="tit curr">tab1</li>

             <li class="tit">tab2</li>

             <li class="tit">tab3</li>

         </ul>

     </div>

     <div class="mc">

         <div id="con1" class="con">内容1</div>

         <div class="con hide">内容2</div>

         <div class="con hide">内容3</div>

     </div>

 </div>

 <script type="text/javascript">

 (function(){

     var $tit = $("#tabs .tit"),$con = $("#tabs .con");

     $tit.click(function(){

         var index = $tit.index($(this));

         $(this).addClass("curr").siblings().removeClass("curr");

         $con.addClass("hide");

         $($con.get(index)).removeClass("hide");

     })

 })();

 </script>

 </body>

 </html>

精简jQuery Tabs的更多相关文章

  1. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 自己手写简约实用的Jquery tabs插件（基于bootstrap环境）

    一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也相对来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs ...

  3. Jquery tabs

    官网 http://api.jqueryui.com/tabs/ 必须通过了后台验证tab1的信息后才允许进入tab2 var passed=false;          $("#tabs ...

  4. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  5. 获取JQuery UI tabs中被选中的tabs的方法

    JQuery标签事件处理实例 如果你正在使用JQuery tabs而且想从基本的功能扩展到自定义的功能,这是你最好知道如何处理JQuery的点击事件. 在这篇文章中: 1.回顾如何添加当tab被点击时 ...

  6. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  7. jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...

  8. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  9. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

随机推荐

  1. mongodb的连接问题，绑定IP惹的祸

    刚刚安装好了 mongodb .对着 mongodb in action上的例子敲了下面的代码: public class TestDBConnect { @Test public void test ...

  2. 用户子查询，用case

    select  satisfy.STARTTIME,cc.C_CrmID,cc.C_Name ClientName,be.C_NAME,count(yskj.c_id) PhoneSum,sum(ca ...

  3. TypeError: not enough arguments for format string

    到一个问题,表示100% 的时候,出现这个问题. 因为python语法会认为是你需要转移符,这个时候你可以选择100%% 来表示

  4. windows下删除Linux

    在Windows下删除Linux系统的方法(附修复MBR的工具下载) 我的电脑安装了双系统,Windows和Linux,不过由于Linux在最近一段时间内不会使用,所以我打算删除Linux.   删除 ...

  5. unix c 03

    C程序员的错误处理   errno/perror/strerror 都是系统设计好的   自定义函数中的错误处理    1 可以返回-1 代表错误    2 指针类型可以用 NULL 代表错误    ...

  6. A站有一个页面需要PV统计 A站读写该数据 B站读该数据 需要数据同步

    A站弄个缓存,并且开放出一个读取借口给B站 B站读取数据的时候,调用该接口和数据库内的数据累加,然后进行限时即可 ---------------------- 另外其他方法 session服务.mem ...

  7. CF 584B Kolya and Tanya

    题目大意:3n个人围着一张桌子,给每个人发钱,可以使1块.2块.3块,第i个人的金额为Ai.若存在第个人使得Ai + Ai+n + Ai+2n != 6,则该分配方案满足条件,求所有的满足条件的方案数 ...

  8. 第12讲- Android之消息提示Toast

    第12讲 Android之消息提示Toast .Toast Toast 是一个 View 视图,在应用程序上浮动显示少量的信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于向用户显示一些 ...

  9. hdu 5650 so easy (异或)

    我们考虑集合中的每个数x对答案的贡献. 设集合有n个数,则包含x的子集个数有2^(n-1)个. 那么当n > 1时,x出现了偶数次,所以其对答案的贡献就是0:当 n = 1时,其对答案的贡献是 ...

  10. python学习之路-7 模块configparser/xml/shutil/subprocess以及面向对象初级入门

    本篇记录内容 模块 configparser xml shutil subprocess 面向对象 面向对象基础 面向对象编程和函数式编程对比 面向对象中对象和类的关系 面向对象之构造方法 面向对象之 ...