jquery代码实现通用选项卡特效功能
jquery功能代码部分主要以下3点:
1、设置选择当前点击项,添加.on类,并选择同级元素,删除.on类
2、定义index变量 ,获取当前点击的li在.menu li这个选择器选择到的li中的位置
3、.main 下面的 div中索引位置等于index的本身显示 其他的隐藏
用法:
一、脚本部分:
1、引入jquery核心库
2、在页面加载事件中写以下5行jquery代码:
1 |
$( ".menu li" ).click( function (){ |
2 |
$( this ).addClass( "on" ).siblings().removeClass( "on" ); |
3 |
var index
= $( ".menu>li" ).index($( this )); |
4 |
$( ".main>div:eq(" +index+ ")" ).show().siblings().hide(); |
5 |
}); |
二、样式部分:
01 |
.menu { |
02 |
float : left ; |
03 |
list-style-type : none ; |
04 |
height : 30px ; |
05 |
line-height : 30px ; |
06 |
border-right : solid 1px #ccc ; |
07 |
float : left ; |
08 |
padding : 0 ; |
09 |
margin : 0 ; |
10 |
} |
11 |
.menu li { |
12 |
float : left ; |
13 |
width : 100px ; |
14 |
text-align : center ; |
15 |
border : solid 1px #ccc ; |
16 |
border-right : none ; |
17 |
cursor : pointer ; |
18 |
} |
19 |
.main { |
20 |
float : left ; |
21 |
clear : left ; |
22 |
margin-bottom : 20px ; |
23 |
} |
24 |
.menu .on { |
25 |
border-top : solid 1px #a40000 ; |
26 |
border-bottom : solid 1px #fff ; |
27 |
} |
28 |
.tab { |
29 |
height : 200px ; |
30 |
width : 403px ; |
31 |
float : left ; |
32 |
clear : both ; |
33 |
border : solid 1px #ccc ; |
34 |
border-top : none ; |
35 |
line-height : 200px ; |
36 |
text-align : center ; |
37 |
} |
三、HMTL结构部分:
01 |
< ul class = "menu" > |
02 |
< li class = "on" >AAA</ li > |
03 |
< li >BBB</ li > |
04 |
< li >CCC</ li > |
05 |
< li >DDD</ li > |
06 |
</ ul > |
07 |
< div class = "main" > |
08 |
< div class = "tab" >AAA</ div > |
09 |
< div class = "tab" style = "display:none;" >BBB</ div > |
10 |
< div class = "tab" style = "display:none;" >CCC</ div > |
11 |
< div class = "tab" style = "display:none;" >DDD</ div > |
12 |
</ div > |