【www.gdgbn.com--jquery】






tab标签切换






网页特效:void(0)" class="cur">tab项1
tab项2
tab项3
tab项4



这是容器1


这是容器2


这是容器3


这是容器4





<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").mouseo教程ver(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);
});

$(".nav li a").click(function(){//鼠标点击也可以切换
clearinterval(intervalid);
$(".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");
});

});
</script>

本文来源:http://www.gdgbn.com/wangyezhizuo/29488/