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

相关笔记

更多