TAB选项卡的简单切换特效

作者：秋了秋发表时间：2015年01月26日

TAB选项卡在网页设计中是很常用的一款功能，它能够轻松实现不同模块的内容切换显示，在网页设计中节省了不少页面空间，这种特效主要是使用了js控制内容的显隐。一段很简单js即可完成这样的任务，我们来看看它的效果吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p> <p></p> <style type="text/css"> .tabqie {width: 300px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; margin-left: -1px; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; width: 149px; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover {background: #fff;} .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 10px; font-size: 1.2em; padding: 20px 5px 0 5px; } .tab_content li{ width: 100%; overflow: hidden; list-style: decimal inside; height: 20px;} .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> <p> <script type="text/javascript" src="http://resource.netblog.site/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { //默认的动作 $(".tab_content").hide(); //隐藏所有内容 $("ul.tabs li:first").addClass("active").show(); //激活第一个选项 $(".tab_content:first").show(); //展示第一个选项的内容 //鼠标点击事件 $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //去除所有的"active"类 $(this).addClass("active"); //插入"active" 类到选项卡 $(".tab_content").hide(); //隐藏所有内容 var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); //渐入显示 return false; }); }); </script> </head></p> <p><body> </p> <div class="tabqie"> <div class="tab_container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="#tab4">TAB标签</a></li> </ul> <div id="tab1" class="tab_content" style="display: block; "> <ul> <li><a target="_blank" href="//netblog.cn/blog/116.html">可关闭的右下角弹出广告特效代码</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">非常漂亮的网页秒表计时器</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">一款适用于放网站侧边栏的特效日历</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">日期选择表格快捷填充器特效</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">CSS3荷叶窗式切换的幻灯片特效</a></li> </ul> </div> <div id="tab4" class="tab_content" style="display: none; "> <ul> <li><a target="_blank" href="//netblog.cn/blog/116.html">纯代码给wordpress制作二级多级菜单特效</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">js实现图片360度旋转特效</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">简洁纯css实现Lightbox特效</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">SEO不是全部，不要过度迷信SEO</a></li> <li><a target="_blank" href="//netblog.cn/blog/116.html">资源分享俱乐部QQ群184139138</a></li> </ul> </div> </div> </div> </div> <p></body> </html>

提示：可以先修改部分代码再运行

代码都进行了注释，修改起来应该很容易了。千万别忘了加载jquery库，否则会失效。

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/273.html

目录: 网页特效标签: 选项卡切换 9816次阅读

TAB选项卡的简单切换特效

作者：秋了秋 发表时间：2015年01月26日

作者：秋了秋发表时间：2015年01月26日