实用好看的CSS+JS+table 导航

来源：互联网发布：护肤品淘宝店名字大全编辑：程序博客网时间：2024/04/29 02:32
预览效果图
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style type="text/css">   .tab{   border:0px solid #000000;   width:98%;   height:50px;   background:#000000;  }  .taby{   display:none;  }  .tabx{   text-align:center;   border:0px solid #000000;   width:98%;   height:30px;   background:#999999;   display:block;  }  .tabx span{   font-size:14px;   color:#ffffff;   font-family:"黑体";   font-weight:500;   text-align:center;   margin:3px 10px;  }     .tab tr{   font-size:15px;   color:#ffffff;   font-family:"黑体";   font-weight:600;  }  .xstd{   border:0px solid #000000;   font-size:15px;   color:#000000;   font-family:"黑体";   font-weight:600;   background:#999999;     }  .lk{   font-size:15px;   color:#ffffff;   font-family:"黑体";   font-weight:600;   background:#000000;  }    </style>  <script>  function xz(id){  for(var i=1;i<=6;i++){          document.getElementById("td"+i).className="lk";  }  document.getElementById("td"+id).className="xstd";  if(id == '2'){         document.getElementById("xianshi").className="tabx"; var html="<span style=\"cursor:pointer;\" onclick=\"accp()\">外包业务</span><span style=\"cursor:pointer;\">外包业务</span><span style=\"cursor:pointer;\">外包业务</span>"; document.getElementById("xzt").innerHTML=html;  }else{     document.getElementById("xianshi").className="taby";  }  }  function accp(){  alert("敬请期待！");  }  </script> </head> <body>    <center><table  class="tab" cellspacing=0 cellpadding=0  >  <tr align="center"><td width="150px"> </td><td width="80px" style="cursor:pointer;" class="xstd" onclick="xz('1')"  id="td1" >首页</td><td width="80px"  style="cursor:pointer;"  onclick="xz('2')" id="td2">公司业务</td><td width="80px" style="cursor:pointer;" onclick="xz('3')" id="td3">公司概况</td><td width="80px" style="cursor:pointer;" onclick="xz('4')" id="td4">公司成就</td><td width="80px" style="cursor:pointer;"  onclick="xz('5')" id="td5">联系方式</td><td width="80px" style="cursor:pointer;"  onclick="xz('6')" id="td6">等待上线</td><td> </td>  </tr>  </table></center>  <center><table  class="taby" id="xianshi">  <tr ><td id="xzt" align="center" width="800px" ></td>  </tr>  </table></center> </body></html>
1 0