jquery tab滑动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tab标签切换</title> 
</head> 
<style> 
.sub-con{height:300px; width:500px;border:1px solid #3CF;display:none;} 
.cur-sub-con{ display:block;} 
.cur{
color:red;}
</style> 
<body> 
<div class="nav"> 
<ul> 
<li><a href="javascript:void(0)" class="cur">Tab项1</a></li> 
<li><a href="javascript:void(0)">Tab项2</a></li> 
<li><a href="javascript:void(0)">Tab项3</a></li> 
<li><a href="javascript:void(0)">Tab项4</a></li> 
</ul> 
</div> 
<div class="sub-con cur-sub-con"> <a href="#" title="这是容器1">这是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器2">这是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器3">这是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器4">这是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var intervalID; 
var curLi; 
 
 $(".nav li a").mouseover(function(){ 
 curLi=$(this); 
 intervalID=setInterval(onMouseOver,250);//鼠标移入的时候有一定的延时才会切换到所在项,防止用户不经意的操作 
 }); 
 
 function onMouseOver(){ 
  $(".cur-sub-con").removeClass("cur-sub-con"); 
  $(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
  $(".cur").removeClass("cur"); 
  curLi.addClass("cur"); 
 } 
 
 $(".nav li a").mouseout(function(){ 
 clearInterval(intervalID); 
 }); 
}); 
</script> 
</html>

 

你可能感兴趣的:(jquery tab滑动菜单)