下面用第二种方式给你写个超简单的例子
<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>
js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式，并加入背景图片。
4、为li添加id，创建函数fun ，并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
