本文实例讲述了jQuery插件实现选项卡栏切换功能。分享给大家供大家参考,具体如下:
<>强效果:
(函数(美元){//给美元的fn添加方法
.fn美元。标签=function(选项){/* {
tabHeads:“李tab-menu>”,
tabHeadsClass:“活跃”,
tabBodys:“tab-main> div ',
tabBodysClass:“选择”
}
*//* *
* @param选项对象
李* @param options.tabHeads:上面的标签
李* @param options.tabHeadsClass:标签需要添加的类名
* @param options.tabBodys:下面四个内容盒子
* @param options.tabBodysClass:下面四个内容盒子需要添加的类名
*///将fn这个对象存起来,代码结束的时候让它返回
var $ bigDiv=;//1 .给页签们添加点击事件
美元(options.tabHeads)。(“点击”,函数(){//2 .给被点击李的标签添加类,给其它兄弟标签移除这个类
(美元).addClass (options.tabHeadsClass) .siblings () .removeClass (options.tabHeadsClass);//3 .获取当前点击的标签的索引
var idx=$(这).index ();//4 .从下面div里面找到和idx相同的索引,给它添加类,其它兄弟页面移除这个类
$ (options.tabBodys) .eq (idx) .addClass (options.tabBodysClass) .siblings () .removeClass (options.tabBodysClass)
})
返回bigDiv美元;
}
}(jQuery))
之前
<强>代码结构:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net jQuery选项卡切换& lt;/title>
& lt; style>
* {
保证金:0;
填充:0;
}
ul {
list-style:没有;
}
.tab {
宽度:400 px;
高度:50 px;
背景:# ccc;
保证金:100 px的汽车;
}
.tab-body {
宽度:400 px;
身高:398 px;
边界:1 px固体# ccc;
}
.tab .item {
显示:没有;
padding-left: 30 px;
}
李.tab-head {
浮:左;
宽度:100 px;
高度:50 px;
text-align:中心;
行高:50 px;
光标:指针;
}/*让下方的内容显示*/.item.selected {
显示:块;
}/*让上李方标签改变颜色*/.active {
background - color: hotpink;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=把∠羁ā北?
& lt; ul类=皌ab-head”比;
& lt;李类=盎钤尽钡脑谝城? & lt;/li>
& lt;李在页签2 & lt;/li>
& lt;李在页签3 & lt;/li>
& lt;李在页签4 & lt;/li>
& lt;/ul>
& lt; div类=皌ab-body”比;=& lt; div类”项选择“比;
& lt; p>内容1 & lt;/p>
& lt; p>内容1 & lt;/p>
& lt; p>内容1 & lt;/p>
& lt; p>内容1 & lt;/p>
& lt;/div>
& lt; div类="项目"比;
& lt; p>内容2 & lt;/p>
& lt; p>内容2 & lt;/p>
& lt; p>内容2 & lt;/p>
& lt; p>内容2 & lt;/p>
& lt;/div>
& lt; div类="项目"比;
& lt; p>内容3 & lt;/p>
& lt; p>内容3 & lt;/p>
& lt; p>内容3 & lt;/p>
& lt; p>内容3 & lt;/p>
& lt;/div>
& lt; div类="项目"比;
& lt; p>内容4 & lt;/p>
& lt; p>内容4 & lt;/p>
& lt; p>内容4 & lt;/p>
& lt; p>内容4 & lt;/p>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——金桥代码实现过程——比;
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt; !——//引入自己写的方法——比;
& lt;脚本src=" https://www.yisu.com/zixun/jQuery-tabs.js "祝辞& lt;/script>
& lt; script>
$(函数(){//先自己写一个jQuery-tabs方法(相当于js插件)//调用自己写的方法
$(" #包装”).tabs (
{
tabHeads:“李.tab-head>”,
tabHeadsClass:“活跃”,
tabBodys:“.tab-body> div ',
tabBodysClass:“选择”
}
）
})
& lt;/script>
& lt;/body>
& lt;/html>
之前
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》,《jQuery常用插件及用法总结》,《jQuery扩展技巧总结》及《jQuery选择器用法总结》
