tab选项卡

利用JQ实现tab选项卡的效果

html代码：

<div class="wrap">
        <ul class="tab_title">
            <li class="on">测试一</li>
            <li>测试二</li>
            <li>测试三</li>
        </ul>
        <div class="tab_content">
            <div class="tab_content_list">
                <p>text1</p>
            </div>
            <div class="tab_content_list">
                <p>text2</p>
            </div>
            <div class="tab_content_list">
                <p>text3</p>
            </div>
        </div>
    </div>

css样式：

    *{
        margin:0px;
        padding: 0px;
    }
    .wrap{
        margin:0 auto;
        width: 1000px;
    }

    .tab_title{
        float: left;
        width: 100%;
        height: 40px;
    }

    .tab_title li{
        float: left;
        list-style: none;
        width: 33%;
        height: 100%;
        background: #FFFF00;
        text-align: center;
        color: #000;
        line-height: 40px;
        border:1px solid #fff;
        cursor: pointer;
    }

    .on{
        background: #99CC33 !important;
    }

    .tab_content{
        float: left;
        width: 998px;
        border:1px solid #3399CC;
        padding: 20px;
    }

    .tab_content_list{
        display: none;
    }

js部分：

$(function(){
            function tabs(tabtit,on,tabcon){ <!--定义函数参数-->
                $(tabcon).each(function(){
                    $(this).children().eq(0).show();
                });
                $(tabtit).each(function(){
                    $(this).children().eq(0).addClass(on);
                });
                $(tabtit).children().click(function(){
                    $(this).addClass(on).siblings().removeClass(on);
                    var index = $(tabtit).children().index(this);
                    $(tabcon).children().eq(index).show().siblings().hide();
                });
            }
            tabs(".tab_title","on",".tab_content");
        })