tab标签切换

tab标签切换经常用到，所以写了一个简单的demo，支持ie6+浏览器。

html代码

<ul class="tab clearfix">
    <li>标签1</li>
    <li class="tab-active">标签2</li>
    <li>标签3</li>
</ul>
<div class="content">
    <div class="inner" style="display:none">
        标签1内容
    </div>
    <div class="inner">
        标签2内容
    </div>
    <div class="inner" style="display:none">
        标签3内容
    </div>
</div>   

css

.content{
    border:1px solid #ddd;
    width:730px;
    height: 200px;
    background: #fff;
    *position: relative;
    *z-index: 10;
}
.tab{
    margin-top: 12px;
    width: 730px;
    height: 30px;
    list-style: none;
    margin-bottom: -1px;
    *position: relative;
    *z-index: 20;   
}
li{
    float: left;
    height: 28px;
    padding: 0 25px;
    border: 1px solid #DDDDDD;
    margin-right: 10px;
    line-height: 30px;
    cursor: pointer;
    background: #FAFAFA;
    color: #0461B1;
    font-size: 14px;
}
.tab-active{
    border-bottom:none;
    border-top-width: 2px;
    height: 28px;
    background: #fff;
    color: #333333;
    font-weight: bold;
}

js

<script type="text/javascript">
    var lists = $('.tab li');
    var contents = $('.content .inner');

    function bindEvent(){

        lists.each(function(index_li, li){
            $(this).on('click', function(event){

                lists.removeClass('tab-active');
                $(this).addClass('tab-active');

                contents.each(function(index_content, content){
                    if(index_li === index_content){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });
        });
    }

    function init(){
        bindEvent();
    }

    init();
</script>

效果