在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，或者是展示顶级频道页面下的多个栏目的内容，其实CSS也可实现这样的效果，但是还是没有jQuery实现起来方便，以下是今天学习jQuery写的一个jQuery实现tab切换栏特效，实现多个模块点击切换的Demo.
Html和jQuery代码：
<!doctype html><html lang="ch-ZN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tab切换栏选项卡jQuery特效</title><link rel="stylesheet" href="tab.css"><script src="/jquery/2.1.4/jquery.min.js"></script></head><body><main class="main"><div class="recommend-article container"><ul class="navTab"><li class="active">最新文章</li><li>热门文章</li><li>热门点击</li></ul><div class="article-item"><ul><li><a href="#">简单实现jQuery鼠标经过切换图片特效简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li><li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li></ul><ul><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li><li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li></ul><ul><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li><li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li></ul></div></div></main><script>$(function () {$(".navTab li").click(function () {$(this).addClass("active").siblings().removeClass("active");var index =$(this).index();$(".article-item ul").eq(index).show().siblings().hide();})})</script></body></html>
css部分代码：
*{margin: 0;padding: 0;box-sizing: border-box;}body{font-family: "Microsoft YaHei UI Light";font-size: 14px;color: #666;}body ul li{list-style: none;}body a{color: #333;text-decoration: none;}body a:hover{color: #F06868;}.main{margin-top: 20px;}.container{width: 360px;margin:0 auto;}.recommend-article {padding: 15px;background-color:#ddd;}.recommend-article .navTab{margin: 10px 0;font-size: 16px;font-weight: 600;border-bottom: 1px solid #fff;}.recommend-article .navTab li{display:inline-block;padding: 5px;border: 1px solid #f5f5f5;border-bottom: none;background-color: #fff;border-radius: 10px 10px 0 0;}.recommend-article .navTab li.active{background-color:#df5000;color: white;}.recommend-article .article-item{max-height: 257px;padding: 10px;line-height: 24px;overflow: hidden;border: 1px solid #fff;}.recommend-article .article-item ul li{counter-increment: number;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.recommend-article .article-item ul li::before{display: inline-block;width: 16px;height: 16px;margin-right: 5px;font-weight: 600;text-align: center;content: counter(number);}.recommend-article .article-item ul li:nth-child(1)::before{color: rgba(255,0,0,.8);}.recommend-article .article-item ul li:nth-child(2)::before{color: rgba(255,0,0,.6);}.recommend-article .article-item ul li:nth-child(3)::before{color: rgba(255,0,0,.4);}
Css部分中需要对放置内容的容器盒子设定高度(article-item)，否则刷新页面时会在第一个模块中显示所有模块的内容。
效果图：
