基于jquery自己写滑动门，通用版

　　今天与大家分享一下，自己写的滑动门。在网上也搜索了一下，没发现比较好的，于是乎自己写一吧~写起来也很简单，为了方便使用，我已经尽量封装好了。好吧，闲话少说，直接上代码吧......

　　css:

.main
    {
        height:360px;
        width:290px;
        border:1px solid #444444;
        font-size:12px;
        color:#444444;
        margin:20px;
    }
    .main_top
    {
        height:30px;
        width:290px;
        line-height:30px;
        text-align:left;
        background-color:#999999;
        border-bottom:1px solid #444444;
    }
    .main_top ul
    {
        padding:0px;
        margin:0px;
        list-style-type:none;
        position:absolute;
    }
    .main_top ul li.h_qian
    {
        float:left;
        width:80px;
        text-align:center;
        background-color:#999999;
        height:30px;
    }
    .main_top ul li.h_hou
    {
        float:left;
        width:80px;
        text-align:center;
        background-color:#ffffff;
        cursor:pointer;
        margin-top:1px;
        height:30px;
        font-weight:bold;
    }
    .main_content
    {
        margin:10px;
    }

　　js:

function tabchange(obj,p,c,q,h) {
    $(obj).parent().find("li").attr("class", ""+q+"");
    $(obj).parents("."+p+"").find("."+c+"").hide();
    $(obj).attr("class", ""+h+"");
    var j = $(obj).index();
    $(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show();
}

　　html:

<div class="main">
        <div class="main_top">
            <ul>
                <li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li>
                <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li>
                <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li>
            </ul>
        </div>
        <div class="main_content">第1块
        </div>
        <div class="main_content" >第2块
        </div>
        <div class="main_content" >第3块
        </div>
    </div>

　　代码很简单，不多说了，详细使用方法请参照Demo中tangtab.js里的注释。

　　附：Demo

　　PS：Tandy Tang祝大家写代码写的愉快！