今天写的两个小效果都是为了测试我写的单参函数,结果还是有点成功的~~此处是不是想发表情包!
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就好啦!
时间: 2024-11-05 21:46:46