选项卡在网页中经常会用到，以下是一个简单的案例封装。
1、代码封装
function tabSwtich(m,c,a){
var change=function(i){
m.each(function(index){
index==i?$(this).addClass(a):$(this).removeClass(a);
})
c.each(function(index){
index==i?$(this).show():$(this).hide();
});
};
m.each(function(i){
$(this).mouseenter(function(){
change(i);
});
})
}2、调用方法：
$(function(){
tabSwtich($('.tab_btn span'),$('.tab_content li'),'ac');
})3、html代码：
<div class="tab">
<div class="tab_btn">
<span class="ac">选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
<div class="tab_content">
<li style="display:block">内容1</li>
<li style="display:none">内容2</li>
<li style="display:none">内容3</li>
</div>
</div>
<style>
.tab_btn.ac{background:red}
</style>
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）