一、代码内容：
选项卡切换——带标题底纹样式
二、效果如图：
三、代码：
<!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>
时间： 2024-11-14 02:10:52