js写导航栏hover效果

JavaScript021

js写导航栏hover效果,第1张

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

1:ajax2:js+css

下面用第二种方式给你写个超简单的例子

<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>