插件描述：适应一个页面存在多个TAB场景
说明
1.引入文件
<link href="./css/tabStyle.css" rel="stylesheet" type="text/css"> <script src="./js/tabScript.js" type="text/javascript"></script>
2.添加JS代码初始化TAB功能
$(function(){
loadTab();
});3.TAB结构
<ul class="tabs"> <li><a href="#" name=".tab1_1">TAB标题</a></li> ...... </ul> <div class="content"> <div class="tab1_1"> TAB页内容 </div> ...... </div>
注意：
1. ul 中 li 的数量应匹配 <div class="content"> 中 div 的数量
2. ul 中 a 的 name 值应匹配 <div class="content"> 中 对应div的 class 值
3. 关于 name=".tab1_1" 中值的问题的说明
3.1. 前端 “.” 为使用CLASS定位
3.2. 笔者的应用场景( 页面列表存在N个标题相同，内容不同的TAB )
<ul class="tabs">
<li><a href="#" name=".tab${num.index }_1">标题</a></li>
<li><a href="#" name=".tab${num.index }_2">标题</a></li>
</ul>
<div class="content">
<div class="tab${num.index }_1">
TAB1 内容
</div>
<div class="tab${num.index }_2">
TAB2 内容
</div>
</div>PREVIOUS:
NEXT:
相关插件-Tabs
讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
zhishizhaoni 0
2017/7/27 17:48:02
div里面存放的<iframe>，如何只加载当前显示的这个<iframe>呢？其他的<iframe>，只有在显示当前的那个选项卡时，才加载
回复
叶憬鸿 0
2016/7/15 20:07:07
-
切换里面，不能放DIV？？？？ 搞什么鬼
areyouOk1
2016/7/15 22:07:21
tabScript.js 下第三行
$(obj).parent().parent().next("div").find("div").hide();改成
$(".content > div").hide();就可以用div了，但是只能用一个。 改的不完善，老外写的好看，但是不实用。
喵咪2荡1
2016/9/10 9:09:55
$(obj).parent().parent().next("div").find("div[class^='tab']").hide();
轻触指尖的冰凉0
2017/9/14 15:25:47
为你点赞！！！解决了。
X.z 0
2015/7/26 19:07:17
-
这个TAB有BUG，如果在
div class="content"div class="tab${num.index }_1"TAB1 内容divdiv class="tab${num.index }_2"TAB2 内容div
div
TAB1 内容下面有DIV存在，会被hide
回复
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
