您的位置：首页 > Web前端 > CSS

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

2016-04-05 15:23 615 查看
预览效果图





<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航