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 > |