关闭

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

标签: JScsshtml导航table
1273人阅读 评论(0) 收藏 举报
分类:

预览效果图




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


2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:113312次
    • 积分:1685
    • 等级:
    • 排名:千里之外
    • 原创:56篇
    • 转载:1篇
    • 译文:0篇
    • 评论:8条
    博客专栏
    最新评论