jQuery实现选项卡

【摘要】一大早起来想给自己网站添加一些内容，文章阅读排名的选项卡，然后我就做了一个jQuery的选项卡，分享给大家。

首先看看，效果图：

HTML如下：

1. <div class="wrap">

2. 	<ul class="tab">

3. 		<li class="active">最新</li>

4. 		<li>热门</li>

5. 		<li>新闻</li>

6. 		<li>视频</li>

7. 	</ul>

8. 	<div class="content cur">最新内容...</div>

9. 	<div class="content">热门内容...</div>

10. 	<div class="content">新闻内容...</div>

11. 	<div class="content">视频内容...</div>

12. 	<div class="clear"></div>

13. </div>

CSS样式：

1. *{margin:0;padding:0;font-size:12px;list-style:none;}

2. .wrap{margin:100px auto;width:360px;border:1px solid #CCC;border-radius:4px;}

3. .wrap .tab{float:left;width:100%;}

4. .wrap .tab li{float:left;width:10%;margin:3% 3%;text-align:center;line-height:30px;border-bottom:3px solid #CDCDCD;cursor:pointer;color:#333;}

5. .wrap .tab li:hover{color:#222;border-bottom:3px solid #3385FF;}			

6. .wrap .tab .active{border-bottom:3px solid #3385FF;}

7. .wrap .content{float:left;width:100%;display:none;padding:5px 0 30px 0;margin:5px 3% 0 3%;}

8. .wrap .cur{display:block;}

9. .clear{clear:both;}

jQuery代码：

1. $('.wrap .tab li').click(function(){

2. 	var idx=$(this).index('.wrap .tab li');

3. 	$('.wrap .tab li').removeClass('active');

4. 	$('.wrap .tab li').eq(idx).addClass('active');

5. 	$('.wrap .content').removeClass('cur');

6. 	$('.wrap .content').eq(idx).addClass('cur');

7. })

是不是很简单，很快速~

我要打赏