float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}

tabsecond li.tabin {

background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
z-index: 100;
position: relative;
}

contentsecond {

width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
position: relative;
top: -1px;
}
img {
display: none;
}

$(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");
});
});