jQuery实现标签页效果实战（4）(2)

/** * tab页面模块的js代码 */ $(document).ready(function() { $("#tabfirst li").each(function(index){ //每一个包装li的jquery对象都会执行function中的代码 //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 //有了index的值之后，就可以找到当前标签对应的内容区域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); }); //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容 $("#realcontent").load("../jsp/tabLoad.html"); //找到标签2效果对应的三个标签，注册鼠标点击事件 $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond .tabin").removeClass("tabin"); $(this).addClass("tabin"); if(0 == index) { $("#realcontent").load("../jsp/tabLoad.html"); } else if(1 == index) { $("#realcontent").load("../jsp/tabLoad1.html h2"); } else if(2 == index) { $("#realcontent").load("/JqueryStudy/tabServlet"); } }); }); //对于loading图片绑定ajax请求开始和交互结束的事件 $("#contentsecond img").bind("ajaxStart",function(){ $("#realcontent").html(""); $(this).show(); }).bind("ajaxStop", function(){ $(this).slideUp("1000"); }); });

代码参考地址：https://github.com/shizongger/JqueryInAction