标签：
今天写的两个小效果都是为了测试我写的单参函数，结果还是有点成功的~~此处是不是想发表情包！
Tab效果很简单，这里我就不赘述了，直接上代码：
html代码：
<div class="content"> <div class="tab1 cf"> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> </div> <div class="tab2 cf"> <div>1111第一项内容</div> <div>2222第二项内容</div> <div>3333第三项内容</div> </div> </div>
css代码：
.tab1 li{ float: left; width: 98px; border:1px solid #f00; display: inline-block; height: 50px; } .tab2 div{ border:1px solid #f00; width: 300px; height: 100px; }
js代码：
function tabSwitch(tab){ var tabBox=tab; var tab1Li=tabBox.find(".tab1 li"); var tab2Div=tabBox.find(".tab2 div"); tab2Div.hide(); tabBox.find(".tab1 li:first-child").css("background","#FABB3E"); tabBox.find(".tab2 div:first-child").show(); tab1Li.click(function(){ var index=$(this).index(); $(this).css("background","#FABB3E").siblings().css("background","#fff"); tab2Div.eq(index).show().siblings().hide(); }); return false; } tabSwitch($(".content"));//调用tabSwitch函数
好啦，这个就可以多次调用啦~
效果图！！
这么丑大家就不要欣赏了，这个博文也主要不是突出样式的，大家可以根据自己喜欢去改css就好啦！
标签：
原文地址：http://www.cnblogs.com/daisyyuan/p/5557179.html
