菜单导航中经常应用滑动门技术,之前用纯CSS样式也可以写滑动门,IE6中除了a标签,其它的标签还不兼容hover伪类,所以必须要把a标签写在span或者其它标签的外层,可是那样又不符合W3C标准,所以,还是用jQuery来完成吧,从来不用去考虑伪类兼容的问题了,代码如下:
HTML部分:
1 2 3 4 5 6 7 8 | <ulid="nav"> <li class="active"><span><a href="./">Home</a></span></li> <li><span><a href="./">Products</a></span></li> <li><span><a href="./">About FINE-V</a></span></li> <li><span><a href="./">Production Process</a></span></li> <li><span><a href="./">Order Online</a></span></li> <li><span><a href="./">Contact Us</a></span></li> </ul> |
.active 是鼠标滑过之后的样式,下面是jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // JavaScript Document $(function(){ $("#nav li").hover(function(){ className=( $(this).attr("class")); $(this).addClass("active"); }, function () { if(className==""){ $(this).removeClass("active"); }else{ $(this).addClass(className); } } ); }) |
呵呵,比较简单,就是多加了一个判断,大家可以参考一下,也比较实用。
自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com
本文链接地址: jQuery控制导航滑动门代码 http://www.chhua.com/web-note2462
评论