闲来无事，周末用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. HTML5视频

    <video>标签用于定义视频. 案例1: <!DOCTYPE html><html><head lang="en"> <me ...

  2. gridview动态生成列

    // 有连接的列 if (!String.IsNullOrWhiteSpace(filedModel.C_SqlDetail)) { HyperLinkField hyperColumn = new ...

  3. meta 属性

    几乎所有的网页里,我们可以看到类似下面这段的html代码:<head><meta http-equiv="content-Type" content=" ...

  4. hasOwnProperty方法的使用

    JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName)其中参数obj ...

  5. YII CDbCriteria总结

    $criteria = new CDbCriteria; //$criteria->alias = 't';  //查询该表 $criteria->addInCondition('id', ...

  6. hdu 2807 The Shortest Path

    http://acm.hdu.edu.cn/showproblem.php?pid=2807 第一次做矩阵乘法,没有优化超时,看了别人的优化的矩阵乘法,就过了. #include <cstdio ...

  7. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  8. 通过Excel来集中管理资源文件

     在支持双语或多语种项目中,常常需要编辑多个文件来添加资源项,感觉比较繁琐,所以想做一个可以集中管理资源文件的工具.借助Excel,使用Excel来记录,并且通过Excel可以进行分页分模块来规划 ...

  9. 【转】UltraISO制作U盘启动盘安装Win7/9/10系统攻略

    U盘安装好处就是不用使用笨拙的光盘,光盘还容易出现问题,无法读取的问题.U盘体积小,携带方便,随时都可以制作系统启动盘. U盘建议选择8G及以上大小的. 下面一步一步讲解如果制作U盘安装盘: 1.首先 ...

  10. ECharts 使用实例

    HTML与JavaScript代码: <%@ page language="java" contentType="text/html; charset=UTF-8& ...