js写导航栏hover效果

JavaScript024

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

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

1.首先将以下代码插入到你body需要设置导航的地方

<div id="navmenu">

<ul id="navi">

<li><a href="index.htm" _fcksavedurl="index.htm">梧桐首页

</a></li>

<li><a href="index1.htm" _fcksavedurl="index1.htm">网站优化

</a></li>

</ul>

</div>

<script type="text/javascript" language="javascript">

var nav = document.getElementById("navi")

var links = nav.getElementsByTagName("li")

var lilen = nav.getElementsByTagName("a")//判断地址

var currenturl = document.location.href

var last = 0

for (var i=0i<links.lengthi++)

{

var linkurl = lilen[i].getAttribute("href")

if(currenturl.indexOf(linkurl)!=-1)

{

last = i

}

}

links[last].className = "navon" //高亮代码样式

</script>

2.然后将以下CSS代码添加到你网站的CSS文件中

#navmenu{ width:980px}

#navmenu ul{ padding:0pxmargin:0px}

#navmenu ul li{ float:leftwidth:80pxlist-style:none

text-align:centerheight:30pxline-height:30px}

.navon{ background:#000000} .navon a{ color:#ffffff}

看下这个吧，JS跟简单。但是没有JS，更没有DW，写不了。