下面用第二种方式给你写个超简单的例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>简单js+css导航例子</title>
<script language="javascript" type="text/javascript">
function $(id)
{
return document.getElementById(id)
}
function ChangeNav(n)
{
for(var i=0i<3i++)
{
if(i==n)
{
$("nav"+i).style.display="block"
}
else
{
$("nav"+i).style.display="none"
}
}
}
function ChangePage(n)
{
for(var i=0i<12i++)
{
if(i==n)
{
$("main"+i).style.display="block"
}
else
{
$("main"+i).style.display="none"
}
}
}
</script>
<style type="text/css">
li.nav{float:leftpadding-right:30px}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2" scope="col">
<ul>
<li class="nav"><a href="javascript:ChangeNav(0)">导航0</a></li>
<li class="nav"><a href="javascript:ChangeNav(1)">导航1</a></li>
<li class="nav"><a href="javascript:ChangeNav(2)">导航2</a></li>
</ul>
</th>
</tr>
<tr>
<td style="width:30%">
<div id="nav0" style="display:block">
<ul>
<li><a href="javascript:ChangePage(0)">左导航0</a></li>
<li><a href="javascript:ChangePage(1)">左导航1</a></li>
<li><a href="javascript:ChangePage(2)">左导航2</a></li>
<li><a href="javascript:ChangePage(3)">左导航3</a></li>
</ul>
</div>
<div id="nav1" style="display:none">
<ul>
<li><a href="javascript:ChangePage(4)">左导航4</a></li>
<li><a href="javascript:ChangePage(5)">左导航5</a></li>
<li><a href="javascript:ChangePage(6)">左导航6</a></li>
<li><a href="javascript:ChangePage(7)">左导航7</a></li>
</ul>
</div>
<div id="nav2" style="display:none">
<ul>
<li><a href="javascript:ChangePage(8)">左导航8</a></li>
<li><a href="javascript:ChangePage(9)">左导航9</a></li>
<li><a href="javascript:ChangePage(10)">左导航10</a></li>
<li><a href="javascript:ChangePage(11)">左导航11</a></li>
</ul>
</div>
</td>
<td>
<div id="main0" style="display:block">第一页</div>
<div id="main1" style="display:none">第二页</div>
<div id="main2" style="display:none">第三页</div>
<div id="main3" style="display:none">第四页</div>
<div id="main4" style="display:none">第五页</div>
<div id="main5" style="display:none">第六页</div>
<div id="main6" style="display:none">第七页</div>
<div id="main7" style="display:none">第八页</div>
<div id="main8" style="display:none">第九页</div>
<div id="main9" style="display:none">第十页</div>
<div id="main10" style="display:none">第十一页</div>
<div id="main11" style="display:none">第十二页</div>
</td>
</tr>
</table>
</body>
</html>
给你一个朴素版的导航(包含css和html2部分)：css.css文件
body{
font-size:12px
font-family:Arial,
Helvetica,
sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-align:center
text-decoration:none
float:left
width:100px
padding:3px
5px
0px
5px
}
a:visited{
color:#336601
text-align:center
text-decoration:none
float:left
padding:3px
5px
0px
5px
width:100px
}
a:hover{
color:white
float:left
padding-left:6px
text-align:center
width:100px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px
3px
0px
20px
width:100px
text-align:center
text-decoration:none
background-color:#539D26
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px
5px
position:absolute
z-index:1
left:
198px
top:
25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px
4px
0px
0px
border:1px
solid
#9CDD75
background-color:#F1FBEC
color:#336601
padding:6px
0px
0px
cursor:pointer
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px
4px
0px
0px
background-color:#F5F5F5
color:#999999
border:1px
solid
#EEE8DD
padding:6px
0px
0px
0px
overflow-y:hidden
cursor:pointer
}
