关闭

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

标签: JScsshtml导航table
1394人阅读 评论(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
查看评论

推荐几款JS表格控件

汇总 12款Javascript表格控件(DataGrid) Angular实现主要参见Top 10 AngularJS Table Demos,主要有 ng-table github–ng-table Configuring your table with ngTableParams:ng-ta...
  • u012948976
  • u012948976
  • 2016-07-16 17:31
  • 11203

响应式导航之Table

参考文章见:http://isux.tencent.com/responsive-web-design.html      这篇文章很详细地讲了响应式导航的相关知识,不过关于table的三种响应式导航没有具体的讲解。下面是我根据自己的理解,尝试的这三种...
  • cl1143015961
  • cl1143015961
  • 2014-10-13 16:56
  • 523

一个非常漂亮的简约大气的table

一个非常漂亮的简约大气的table
  • paincupid
  • paincupid
  • 2015-12-31 00:16
  • 4126

HTML好看漂亮的Table样式

  • 2012-07-03 13:40
  • 4KB
  • 下载

四个好看的CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px;...
  • nightelve
  • nightelve
  • 2012-09-08 12:51
  • 412635

好看的CSS——Table样式表

坏狼安全网-漂亮CSS Tables /* CSS Document */ body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; c
  • sminhrosunny
  • sminhrosunny
  • 2011-07-22 14:28
  • 11602

好看漂亮的Table样式

  • 2013-03-29 18:06
  • 4KB
  • 下载

好看的table css样式

漂亮的table表格样式css源码,好看的table css样式 <head> <title></title> <style type="text/css"> table { ...
  • hello_mr_anan
  • hello_mr_anan
  • 2017-04-20 13:53
  • 2240

一款纯css实现的漂亮导航

今天给大家分享一款纯css实现的漂亮导航。之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心。还带来图标,效果不错。一起看下效果图: 在线预览   源码下载 实现的代码。 html代码: Html代码&#...
  • sqzhao
  • sqzhao
  • 2014-11-18 14:45
  • 544

html+css3实现精美导航

下拉导航             *{margin:0px; padding:0px;} body{background:url('img/title.jpg') repeat-x, u...
  • luo1728210158
  • luo1728210158
  • 2016-06-27 09:05
  • 661
    个人资料
    • 访问:127324次
    • 积分:1844
    • 等级:
    • 排名:千里之外
    • 原创:59篇
    • 转载:1篇
    • 译文:0篇
    • 评论:10条
    博客专栏
    最新评论