闲来无事，周末用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. 从配置文件中读取数据获取Connection

    配置文件 db.driver=com.mysql.jdbc.Driver db.url=jdbc\:mysql\://localhost\:3306/mybase db.user=root db.ps ...

  2. ECshop使用财付通接口支付时出现“[3006]您的请求无效，请重新再试

    ECshop使用财付通接口支付时出现“[3006]您的请求无效,请重新再试.”解决方案\includes\modules\payment\tenpay.php 行 104原来的为 $bill_no = ...

  3. WP Super Cache 安装与设置方法

    1.首先,永久连接不能使用默认格式 2.修改永久链接格式,中文推荐采用 /%post_id%.html (这下你知道我的.orz哪里来了吧) 如果你和我一样蛋疼愿意为每篇文章写一个英语的post sl ...

  4. HDU 4009 Transfer water

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4009 题意:给出一个村庄(x,y,z).每个村庄可以挖井或者修建水渠从其他村庄得到水.挖井有一个代价, ...

  5. Qt之四方分割器QuadSplitter

    在Qt经常会用到分割器QSplitter,可以对多个控件进行水平或者垂直分割,但有一些特殊的需求无法满足,比如:四方分割...QuadSplitter是qt-apps里面的一个应用,挺不错的,拿来和大 ...

  6. 转：SVN 出现This client is too old to work with working copy...错误

    本地进行SVN客户端版本更新,但是之前一些代码是用的旧svn客户端提交的,这时候进行代码更新或者提交代码可能会出现错误,我这边是NetBeans中提交代码就出现了以下错误:This client is ...

  7. 【转】 Ubuntu下配置USB转串口及串口工具配置--不错

    原文网址:http://blog.csdn.net/dreambegin/article/details/6985028 注意:默认情况下ubuntu已经安装了USB转串口驱动(pl2303).我的是 ...

  8. Net-Snmp安装配置

    1. 下载安装 net-snmp安装程序:net-snmp-5.4.2.1-1.win32.exe Perl安装程序:ActivePerl-5.10.0.1004-MSWin32-x86-287188 ...

  9. 插入排序（Insertion Sort）

    这是排序算法中最常见的排序方法,也是初学者使用最多的.有时候我们在生活中也会不自觉地用到插入排序,例如: 给手里的牌排序 这是最常见的例子之一,我们通常从纸牌的一边开始看,找到一张位置不正确的,把它拿 ...

  10. 关于部分应用无法向POJ提交代码的解决方案

    有个一年没做过题了,最近有骚年反映他们的VirtualJudge无法做POJ的题目,一直都是JudgeError状态. 于是登录到那个VJudge试了试,代码的确一直无法提交成功,他们的服务器发回50 ...