實用好看的CSS+JS+table 導航

TByoung發表於2015-07-09
CSSJS

預覽效果圖




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


相關文章