jQuery实现选项卡

学习笔记 马富天 2016-05-19 09:21:40 77 1

【摘要】一大早起来想给自己网站添加一些内容,文章阅读排名的选项卡,然后我就做了一个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. })

是不是很简单,很快速~

版权归 马富天PHP博客 所有

本文标题:《jQuery实现选项卡》

本文链接地址:http://www.mafutian.net/119.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 Sublime Text 3操作基本简介 》 下一篇《 使用原生JS实现页面下滑时,DIV保留在顶部位置 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多