【实用代码】选项卡切换——带标题底纹样式

一、代码内容：
　　选项卡切换——带标题底纹样式
二、效果如图：
三、代码：
<!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>
<style type="text/css">

.main{ width:360px; height:200px;}
.nr{
    padding:10px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    height: 100px;
}

.grey{
    float:left;
    color:#000000;
    font-family: "微软雅黑";
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    width: 120px;
    text-align:center;
    height: 35px;
}
.blue{
    float:left;
    color:#000000;
    font-family: "微软雅黑";
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #0066CC;
    width: 120px;
    text-align:center;
    height: 35px;
}

</style>


<script type="text/javascript">
function cayw(name)
{
    return document.getElementById(name);
}
function ShowInfo(x,_d,_x)
{
    for(var p=1; p<=_x; p++){

        cayw("t"+_d+"_info_"+ p).style.display = "none";
    }

    cayw("t"+_d+"_info_"+ x).style.display = "block";
}

</script>

</head>

<body>


<div>


    <div class="main" id="tb_info_1">
        <div>
            <div class="blue" onMouseOver="javascript:ShowInfo(1,'b',3);">主页</div>
            <div class="grey" onMouseOver="javascript:ShowInfo(2,'b',3);">任务管理</div>
            <div class="grey" onMouseOver="javascript:ShowInfo(3,'b',3);">第三项目录</div>
        </div><div style="clear:both"></div>
        
        <div class="nr">主页内容</div>    
    </div>


    <div class="main" id="tb_info_2" style="display:none ">
        <div>
            <div class="grey" onMouseOver="javascript:ShowInfo(1,'b',3);">主页</div>
            <div class="blue" onMouseOver="javascript:ShowInfo(2,'b',3);">任务管理</div>
            <div class="grey" onMouseOver="javascript:ShowInfo(3,'b',3);">第三项目录</div>
        </div><div style="clear:both"></div>
        
        <div class="nr">任务管理内容</div>    
    </div>    



    <div class="main" id="tb_info_3" style="display:none ">
        <div>
            <div class="grey" onMouseOver="javascript:ShowInfo(1,'b',3);">主页</div>
            <div class="grey" onMouseOver="javascript:ShowInfo(2,'b',3);">任务管理</div>
            <div class="blue" onMouseOver="javascript:ShowInfo(3,'b',3);">第三项目录</div>
        </div><div style="clear:both"></div>
        
        <div class="nr">第三项目录内容</div>    
    </div>        
    
    
    
</div>


</body>
</html>
posted on 2015-08-02 10:33 毛毛天空阅读(205) 评论(0) 编辑收藏举报