有用好看的CSS+JS+table 导航
预览效果图
<!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>
