选项卡html结构大致如下：
-
-
-
- 选项卡一
- 选项卡二
- 选项卡三
-
-
-
- 选项卡一的内容
-
-
- 选项卡二的内容
-
-
- 选项卡三的内容
-
-
-
JS选项卡实现方法：
- //选项卡方法
- function tabFn(node,node2,node3){//node参数：选项点击对象,选项对应的内容,父容器
- $(node3).find(node).click(function(){
- $this = $(this);
- var index = $this.index();
- $(this).addClass("curr").siblings().removeClass("curr");
- $(node3).find(node2).hide();
- $(node3).find(node2).eq(index).show();
- })
-
- }
-
-
- //调用方法
- tabFn("#tabBox_nav a",".tabBox_content","#tabBox");//调用选项卡方法
搞定！
补充说明：
“curr”为当前页签/选项卡选中效果的css类名，可以根据需要自行定义样式。
在运用到实际项目的时候，要将所有选项卡对应的选项卡内容一次性全部从数据库里读出来。
如果通过ajax动态读取数据，那么此方法不适用，需要改造JS方法！
默认隐藏除第一个选项卡内容容器外的其它选项卡的内容容器，即第一个容器：tabBox_content显示，同辈的其它容器隐藏。
如果有不清楚的地方，欢迎在文章底部留言给我！
本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z