1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法
2 mouseover事件，
还有就是关键的css样式编写，控制显示的样式，
代码如下：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLEtab /TITLE
link rel="stylesheet" type="text/css" href="css/tab.css"
script type="text/javascript" src="js/jquery-1.4.2.js"/script
script type="text/javascript" src="js/tab.js"/script
/HEAD
BODY
ul
li标签1/li
li 标签2/li
li 标签3/li
/ul
div内容1/div
div内容2/div
div内容3/div
/BODY
/HTML
接下来就是控制样式的css
代码如下：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）ul ,li { margin:0px;
padding:0px;
list-style:none;
}
li { float:left;
background-color:#66CC00;
margin-right:2px; //这个是设置标签之间的间距
padding:5px;
border:1px solid white;
height:20px;
color:white;
}
.listli { background-color:#663333;
border:1px solid #663333;
}
div { clear:left;
width:300px;
height:100px;
background-color:#663333;
border-top:0px;
color:white;
display:none;
}
.divarea { display:block; }
下来就是编写控制滑动的js
代码如下：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）//定义全局变量
var timeout;
$(document).ready(function(){
//找到所有的li标签
$("li").each(function(index){
$(this).mouseover(function(){
//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要
timeout =setTimeout(function(){
$("div.divarea").removeClass("divarea");
$("li.listli").removeClass("listli");
// $("div").eq(index).addClass("divarea"); //另一种写法是:$(div:eq(index)).addClass("divarea");
$("div:eq("+index+")").addClass("divarea");
$("li").eq(index).addClass("listli");
},
320);
$(this).mouseout(function(){
clearTimeout(timeout);
});
});
});
});
