<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>
js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。
