jQuery切换tab标签
来源：互联网 发布：淘宝店铺客户服务 编辑：程序博客网 时间：2024/05/16 19:13
小结：tab标签通过与对应内容index绑定,为当前tab添加一个样式，移除其他，显示当前内容块，隐藏其他内容。（即tab[0]==>section[0]）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style> *{padding: 0;margin: 0} ul{width: 300px;border: 1px solid #0e90d2;text-align: center} ul li{list-style: none;} div{margin: 100px;} ul.tab{overflow: hidden} ul.tab li{ float: left; width: 50%; } .activity{background: #00E8D7} </style></head><body><div> <ul class="tab"> <li>tab1</li> <li>tab2</li> </ul> <ul class="section"> <li >section1</li> <li >section2</li> </ul></div><script> jqtab('.tab', '.section', 'click'); //可以封装成方法 直接调用 function jqtab(tab,section,event) { $(section+'>li').hide(); $(tab).find("li").eq(0).addClass("activity").show(); $(section).find("li").eq(0).show(); //绑定事件 $(tab).find("li").bind(event,function(){ $(this).addClass("activity").siblings("li").removeClass("activity"); var activeindex = $(tab).find("li").index(this); $(section).children().eq(activeindex).siblings().hide(); if($(section).children().eq(activeindex).hide()) { $(section).children().eq(activeindex).show(); } return false; }); }</script></body></html>0 0
- jQuery切换tab标签
- jquery div tab标签切换
- jQuery 实现Tab标签切换
- js(jquery) tab标签切换
- jquery多图tab标签切换焦点图
- jquery实现tab标签选项卡自动切换效果
- jQuery bind事件练习及tab标签切换的实现
- jquery制作的tab标签切换选项卡
- 使用jQuery实现简单的tab栏标签切换
- tab标签切换
- js tab标签切换
- tab标签页切换
- tab标签切换js
- tab标签切换
- tab标签页切换
- Tab标签页切换
- html tab标签切换
- tab标签切换
- LED应用照明产品常识关键点
- 《职业经理人常犯的11个错误》——余世维
- js本地预览图片和转base64
- 开关电源串模扼流圈、共模扼流圈选择方法
- 基于内容产品的MVP探索
- jQuery切换tab标签
- Java mail 发送邮件
- hql中的fetch
- 夜雨
- Conflict with dependency 'com.google.code.findbugs:jsr305'.
- PADS Layout 颜色设置
- 电磁兼容术语、测试项目
- 引入深度反馈
- 来自自身的信息——“灵魂暗夜”
