闲来无事，周末用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. 如何利用putty的密钥登陆

    1.登陆主机,输入:mkdir /root/.ssh(创建SSH密钥目录) touch /root/.ssh/authorized_keys (创建SSH密钥文件):   2.输入:vi /root/ ...

  2. MooTools 异步请求验证

    http://www.chinamootools.com/ 问题 MooTools 异步请求例子 <{foreach from=array('0','1','2','3','4') item=c ...

  3. Python读入与写出中文时出现乱码

    解决办法:重置sys模块,设置默认编码方式为utf-8. 在.py文件的开头添加下面两行代码: reload(sys) sys.setdefaultencoding('utf8')

  4. Realm

    还在为数据库不能获取最新数据而犯愁?信我,你只是需要一个活着的数据库——Realm 写在前面: 又到一年一度七夕虐狗节,看着大家忍受着各种朋友圈和QQ空间还有现实生活中的轮番轰炸,我实在不忍心再在这里 ...

  5. PMBOK 项目管理 九大知识领域和五大流程

    PMI   Project Management Institute.PMI 是世界上最大的非盈利机构,是项目管理领域的领导者.PMI制定项目管理行业标准,带领项目管理的研究并提供项目管理的培训,证书 ...

  6. 在C中嵌入汇编

    早前公布了C和汇编混编的温度控制器程序,收到一些朋友的询问,他们无法在自己程序中使用我的18B20的汇编子程序或无法正常通过混编后的程序编译. 其实在KEIL中嵌入汇编的方法很简单.如图一,在C文件中 ...

  7. ImageMaigck不支持中文路径的问题

    不知道咋回事. 回顾下: char* pTest1 = "测试.txt"; wchar_t* pTest2 = L"测试.txt"; 以上是pTest1指向的内 ...

  8. eclipse打开文件位置Open Explorer 插件

    ,OpenExplorer插件可以满足这个功能,可以到https://github.com/samsonw/OpenExplorer/downloads下载最新版本,将jar包放到eclipse的pl ...

  9. 阻碍android程序员发展的几个原因

    1应该少看网上的android开发相关技术帖子,一个是错误很多,表达也不清楚,很多都是拷贝来拷贝去的.二个是技术变迁快,很多都过时了,经常看android技术相关帖子,养成了一种惰性,遇到问题不是去看 ...

  10. 在Visual Studio Express 2013中开发自定义控件

    在专业版本中,新建项目时有"Windows Control Library"这样一个类型可以用于新建自定义控件项目. 但是Express版本中,没有这样一个类型可供选择.这里有另外 ...