Tab 菜单 JQuery写法

效果图：


 

TAB菜单完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TAB</title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
#div_tabMain{
    border:1px solid #D1D1D1;
    width:300px;
    height:250px;
    margin:10px auto;
}
#div_tabMain ul{
    overflow:hidden;
    background:#EEE;
    height:35px;
}
#div_tabMain ul li{
    list-style:none;
    float:left;
    cursor:pointer;
    display:block;
    height:35px;
    width:80px;
    border-right:1px solid #D1D1D1;
    position:relative;
    z-index:2;
}
#div_tabMain div{
    clear:left;
}
.tabHere{
    color:#005AB3;
    background:white;;
}
.tabOut{
    border-right:1px solid #D1D1D1;
}
#div_tabMain div{
    display:none;
}
#div_tabMain div.div_show{
    display:block;
    border-top:1px solid #D1D1D1;
    position:relative;
    z-index:1;
    bottom:1px;
}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("#div_tabMain ul li").each(function(key){
            var $thisLi=$(this);
            var tabId;
            $(this).mouseover(function(){
                tabId=setTimeout(function(){
                    $thisLi.addClass("tabHere").siblings().removeClass("tabHere");
                    $("#div_tabMain div").eq(key)
                    .addClass("div_show").siblings().removeClass("div_show");
                },200)
            }).mouseout(function(){
                clearTimeout(tabId);
            })



        })
    })

</script>
</head>
<body>
    <div id="div_tabMain">
        <ul>
            <li class="tabHere">HTML</li>
            <li>CSS</li>
            <li>JQuery</li>
        </ul>
        <div class="div_show">HTML</div>
        <div>CSS</div>
        <div>JQuery</div>
    </div>
</body>
</html>


（1）.注意z-index的设置

（2）setTimeout设置延时，用来防止鼠标快速经过切换过快。

posted @ 2012-02-21 18:28  猪弟  阅读(434)  评论(0)    收藏  举报