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

一、代码内容:

  选项卡切换——带标题底纹样式

二、效果如图:

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

三、代码:

 

<!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>

 

你可能感兴趣的:(代码)