标签：
效果如图：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>选项卡切换-标题栏底部颜色切换</title> 6 <style type="text/css"> 7 8 .main{ width:360px; height:200px;} 9 .nr{ 10 padding:10px; 11 border-top-width: 1px; 12 border-right-width: 1px; 13 border-bottom-width: 1px; 14 border-left-width: 1px; 15 border-top-style: none; 16 border-right-style: solid; 17 border-bottom-style: solid; 18 border-left-style: solid; 19 border-top-color: #CCCCCC; 20 border-right-color: #CCCCCC; 21 border-bottom-color: #CCCCCC; 22 border-left-color: #CCCCCC; 23 height: 100px; 24 } 25 26 .grey{ 27 float:left; 28 color:#000000; 29 font-family: "微软雅黑"; 30 font-size: 16px; 31 line-height: 40px; 32 font-weight: bold; 33 border-bottom-width: 3px; 34 border-bottom-style: solid; 35 border-bottom-color: #CCCCCC; 36 width: 120px; 37 text-align:center; 38 height: 35px; 39 } 40 .blue{ 41 float:left; 42 color:#000000; 43 font-family: "微软雅黑"; 44 font-size: 16px; 45 line-height: 40px; 46 font-weight: bold; 47 border-bottom-width: 3px; 48 border-bottom-style: solid; 49 border-bottom-color: #0066CC; 50 width: 120px; 51 text-align:center; 52 height: 35px; 53 } 54 55 </style> 56 57 58 <script type="text/javascript"> 59 function cayw(name) 60 { 61 return document.getElementById(name); 62 } 63 function ShowInfo(x,_d,_x) 64 { 65 for(var p=1; p<=_x; p++){ 66 67 cayw("t"+_d+"_info_"+ p).style.display = "none"; 68 } 69 70 cayw("t"+_d+"_info_"+ x).style.display = "block"; 71 } 72 73 </script> 74 75 </head> 76 77 <body> 78 79 80 <div> 81 82 83 <div class="main" id="tb_info_1"> 84 <div> 85 <div class="blue" onMouseOver="javascript:ShowInfo(1,‘b‘,3);">主页</div> 86 <div class="grey" onMouseOver="javascript:ShowInfo(2,‘b‘,3);">任务管理</div> 87 <div class="grey" onMouseOver="javascript:ShowInfo(3,‘b‘,3);">第三项目录</div> 88 </div><div style="clear:both"></div> 89 90 <div class="nr">主页内容</div> 91 </div> 92 93 94 <div class="main" id="tb_info_2" style="display:none "> 95 <div> 96 <div class="grey" onMouseOver="javascript:ShowInfo(1,‘b‘,3);">主页</div> 97 <div class="blue" onMouseOver="javascript:ShowInfo(2,‘b‘,3);">任务管理</div> 98 <div class="grey" onMouseOver="javascript:ShowInfo(3,‘b‘,3);">第三项目录</div> 99 </div><div style="clear:both"></div> 100 101 <div class="nr">任务管理内容</div> 102 </div> 103 104 105 106 <div class="main" id="tb_info_3" style="display:none "> 107 <div> 108 <div class="grey" onMouseOver="javascript:ShowInfo(1,‘b‘,3);">主页</div> 109 <div class="grey" onMouseOver="javascript:ShowInfo(2,‘b‘,3);">任务管理</div> 110 <div class="blue" onMouseOver="javascript:ShowInfo(3,‘b‘,3);">第三项目录</div> 111 </div><div style="clear:both"></div> 112 113 <div class="nr">第三项目录内容</div> 114 </div> 115 116 117 118 </div> 119 120 121 </body> 122 </html>
标签：
原文地址：http://www.cnblogs.com/jtfdh/p/4638189.html
