菜单导航中经常应用滑动门技术,之前用纯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

相关笔记

更多