jquery代码实现通用选项卡特效功能

jquery代码实现通用选项卡特效功能

2013-12-06  swimly  web前端页面开发

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>