开发最简单的效果- -,基本构架

html,可以换更有意义的结构,这里demo,就简单写,不考虑SEO

<div id="tab-hd">
<div class="tab-li action">1</div>
<div class="tab-li">2</div>
</div>
<div id="tab-body">
<div class="tab-con-li">1111</div>
<div class="tab-con-li">2222</div>
</div>

jq

$.fn.mtab = function (option){
var defaultOption = {
"tabBindElement":"children",
"tabBindElementEvent":"click",
"actionClass":"",
"bodyId":"null",
"animate":"none"
};
if(option){option = $.extend(defaultOption,option);} this.each(function (){
var $this = $(this);
toTab($this);
}); function toTab(_this){
var children = _this.children();
var bodyChildren = $(option.bodyId).children();
bodyChildren.eq(0).show().siblings().hide(); children.on(option.tabBindElementEvent,function(){
var $this = $(this);
var index = $this.index();
$this.addClass(option.actionClass).siblings().removeClass(option.actionClass);
bodyChildren.eq(index).show().siblings().hide();
return false;
})
}
}; $("#tab-hd").mtab({
"tabBindElement":"children", //children,class,element
"tabBindElementEvent":"click",//click,mouseover
"actionClass":"action",
"bodyId":"#tab-body",
"animate":"none"
});

。。。

一下这一款是竖着的tab切换

http://js.itivy.com/jiaoben1584/index.html

开发jquery tab 插件的更多相关文章

  1. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

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

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

  3. jquery tab 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  5. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  6. 用jquery编写的tab插件

    用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...

  7. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  8. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  9. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

随机推荐

  1. JAVA并发的性能调整

    1.互斥技术 synchronized Lock Atomic 性能比较Atomic >  Lock  > synchronized,当然这不是绝对的.当线程数比较少时,synchroni ...

  2. c# 6.0新特性(二)

    写在前面 上篇文章介绍了c#6.0的using static,Auto Property Initializers,Index Initializers新的特性,这篇文章将把剩下的几个学习一下. 原文 ...

  3. asp.net 学习

    1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? 答:尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方式可以保证无论何 ...

  4. 小结-Splay

    参照陈竞潇学长的模板写的BZOJ 3188: #include<cstdio> #include<cstring> #include<algorithm> #def ...

  5. SSH配置文件和SSM配置文件的写法

    一.SSH配置文件的写法(XML版本) <util:properties id="jdbc" location="classpath:db.properties&q ...

  6. UOJ150 运输计划

    运输计划(transport.cpp/c/pas)[问题描述]公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n-1 条 双向 航道,每条航道建立在两个星球之间,这 n-1 条航道 ...

  7. java获取每个月的最后一天

    package timeUtil; import java.text.SimpleDateFormat; import java.util.Calendar; public class LastDay ...

  8. 【转】KMP算法

    转载请注明来源,并包含相关链接.http://www.cnblogs.com/yjiyjige/p/3263858.html 网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初 ...

  9. User表格式

    "_id":基本是700多 "name":"xx01" "pwd":"123"

  10. Effective Java之避免创建不必要的对象

    Effective Java中有很多值得注意的技巧,今天我刚开始看这本书,看到这一章的时候,我发现自己以前并没有理解什么是不必要的对象,所以拿出来跟大家探讨一下,避免以后犯不必要的错误! 首先书中对不 ...