html选项卡封装案例及调用

选项卡在网页中经常会用到，以下是一个简单的案例封装。

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>