<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style type="text/css">
    .tabBox{
        padding:0px;
        margin:5px 0px;
        border:1px solid #999;
        height:300px;
    }
    .tabs{
        height:25px;
        background-color:#ccc;
        border-bottom:1px solid #999;
    
    }
    .tabs ul{
        padding:0px;
        _padding:0px;
        margin:0px;
        _margin:0px;
        list-style-type:none;
        background-color:#ccc;
        height:25px;
        _height:26px;        
    }    
    .tabs ul li{
        overflow:hidden;
        float:left;
        height:25px;
        _height:26px;    
        margin:0px;
        _margin:0px;
        width:80px;
        list-style-type:none;
        border-right:1px solid #999;
        text-align:center;            
    }
    .active{
        background:#FFFFFF;
        border-bottom:1px solid #fff;    
        _border-bottom:1px solid #fff;        
    }
    .vactive{
        background-color:#fff;
        border-right:1px solid #fff;
        _border_right:1px solid #fff;            
    }        
    .normal{
        background-color:#eaeaea;            
    }
    .vnormal{
        background-color:#eaeaea;
        border-right:1px solid #999;
    }
    .tabs ul li a{
        display:block;
        height:25px;
        width:100%;
    }
    /*.tabs ul li:hover,tabs ul li a:hover,tabs ul li a:visited{    
        background-color:#FFFFFF;
        border-bottom:1px solid #fff;    
        _border-bottom:1px solid #fff;        
    }
    .tabs ul a:active{
        background-color:#FFFFFF;
        border-bottom:1px solid #fff;    
        _border-bottom:1px solid #fff;    
    }*/
    
    .content{
        margin-top:0px;
    }
    /*display or nodisplay*/
    .displayCon{
        display:block;        
    }
    .hiddenCon{
        display:none;
    }
    .vertabs{
        width:200px;
        float:left;
        height:100%;
        background-color:#CCCCCC;
        border-right:1px solid #999;        
    }
    .vertabs ul{
        list-style-type:none;
        width:200px;
        padding:0px;
        margin:0px;    
    }
    .vertabs ul li{
        list-style-type:none;
        width:200px;
        height:25px;
        text-align:center;
        border-bottom:1px solid #999;
    }
    .vertabs ul li a{
        display:block;
        height:25px;
        vertical-align:middlel;
    }
    .vercontent{
        width:auto;
        float:left;
        height:100%;
        padding:0px;
        margin:0px;
    }
</style>
<script language="javascript">
    /*$(function(){
        $(".tabs ul li a").mouseover(function(){            
            $(this).addClass("active");
        });    
        $(".tabs ul li a").mouseout(function(){
            $(this).addClass("normal");            
        });                
    })*/
    $(function(){
        $(".titleli").mouseover(function(){
            $(this).css({"background-color":"#ffffff","border-bottom":"1px solid #fff"});
            $(this).siblings().css({"background-color":"#eaeaea","border-bottom":"1px solid #999"});
            var index=$(this).parent().find("li").index($(this));
            /*alert(index);*/
            //$(".content").children().eq(index).show().siblings().hide();
            $(this).parent().parent().next().children().eq(index).show().siblings().hide();
            return false;
        });
        $(".vtitleli").mouseover(function(){
            $(this).css({"background-color":"#ffffff","border-right":"1px solid #fff"});
            $(this).siblings().css({"background-color":"#eaeaea","border-right":"1px solid #999"});
            var index=$(this).parent().find("li").index($(this));
            /*alert(index);*/
            //$(".content").children().eq(index).show().siblings().hide();
            $(this).parent().parent().next().children().eq(index).show().siblings().hide();
            return false;
        });
    })
</script>
</head>
<body>
    <div class="tabBox">
        <div class="tabs">
            <ul>
                <li class="titleli active"><a href="#">tab1</a></li>
                <li class="titleli normal"><a href="#">tab2</a></li>
                <li class="titleli normal "><a href="#">tab3</a></li>
                <li class="titleli normal"><a href="#">tab4</a></li>
                <li class="titleli normal"><a href="#">tab5</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="displayCon">1111111111111111111111111111</div>
            <div class="hiddenCon">22222222222222222222222222222</div>
            <div class="hiddenCon">33333333333333333333333333333</div>
            <div class="hiddenCon">44444444444444444444444444444</div>
            <div class="hiddenCon">88888888888888888888888</div>
        </div>
    </div>
    
    <div class="tabBox">
        <div class="vertabs">
            <ul>
                <li class="vtitleli vactive "><a href="#">tab1</a></li>
                <li class="vtitleli vnormal"><a href="#">tab2</a></li>
                <li class="vtitleli vnormal "><a href="#">tab3</a></li>
                <li class="vtitleli vnormal"><a href="#">tab4</a></li>
                <li class="vtitleli vnormal"><a href="#">tab5</a></li>
            </ul>
        </div>
        <div class="vercontent">
            <div class="displayCon">1111111111111111111111111111</div>
            <div class="hiddenCon">22222222222222222222222222222</div>
            <div class="hiddenCon">33333333333333333333333333333</div>
            <div class="hiddenCon">44444444444444444444444444444</div>
                <div class="hiddenCon">88888888888888888888888</div>
        </div>
    </div>
</body>
</html>