下面用第二种方式给你写个超简单的例子
<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>
回去了，明天来给你回答~~补充：
你这个代码我看了也没有看明白你要完成什么功能，但你说的那个鼠标移走就弹回“欢迎你”我想到的就是设置一个div块，在这个div块里加入“欢迎你”然后在function mover(object)中设置div的style.display="none"，在function mout(object)函数中设置div的style.display=""。
不知道你能不能完成。
<title></title><style>
body
{
margin: 50px
padding: 0
}
#tab ul
{
list-style-type: none
padding: 0
width:250px
margin: 0px
}
#tab ul li
{
width:80px
height:20px
font-size: 20px
text-align: center
line-height: 20px
border: 1px solid #abcdef
float: left
cursor: pointer
}
#tab ul li.active
{
background: #f90
}
</style>
<script>
window.onload=function()
{
var oTab=document.getElementById('tab')
var aLi=oTab.getElementsByTagName('li')
for(var i=0i<aLi.lengthi++)
{
//鼠标移入
aLi[i].onmouseover=function()
{
for(var i=0i<aLi.lengthi++)
{
aLi[i].className=''
}
this.className='active'
}
//鼠标移出
aLi[i].onmouseout=function()
{
for(var i=0i<aLi.lengthi++)
{
aLi[i].className=''
}
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li>首页</li>
<li>产品</li>
<li>新闻</li>
</ul>
</div>
</body>
</html>
