JQuery 生成标签效果
ul,li{
? margin: 0;
? padding: 0;
? list-style:none;
?
}
#tabFirst li{
? float: left;
? background-color:#333333;
? padding: 1px;
? margin-right: 7px;
? color: white;
? border: 1px? solid white;
}
div.contentinFirst{
clear: left;
?background-color:#6e6e6e;
?color: white;
?width:300px;
?height:200px;
?padding: 2px;
?display:none;
}
#tabFirst li.tabin{
?background-color:#6e6e6e;
?border: 1px? solid #6e6e6e;
}
div.contentin{
?display:block;
}
?
#tabSecond li{
? float: left;
? background-color:white;
? padding: 1px;
? margin-right: 7px;
? color: blue;
? cursor:pointer;
}
div.contentinSecond{
clear: left;
?background-color:#f2f6f8;
?color: white;
?padding: 10px;
?width:300px;
?height:100px;
?border:#000000? solid 1px;
?position:relative;
?top: -1px;
}
#tabSecond li.tabin{
?background-color:#f2f6f8;
?border: 1px? solid #6e6e6e;
?border-bottom: 0;
? z-index: 100;
?position:relative;
}
?
?
<!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=gb2312" />
<title>标签页效果</title>
<script language="javascript" src="jquery-1.4.1.min.js" ></script>
<script language="javascript" src="tab.js" ></script>
?<link? type="text/css" href="tab.css"? rel="stylesheet"? />
?
?<script>
?
?? //静态装载
?? $(document).ready(function(){
?? var timeoutid;
?????? $(" #tabFirst li").each(function(index){?
?????? $(this).mouseover(function(){?
???? var aaa = $(this);
???? timeoutid =? setTimeout(function(){
???? $("div.contentin").removeClass("contentin");
????? $("#tabFirst li.tabin").removeClass("tabin");
???? $("div.contentinFirst").eq(index).addClass("contentin");?
???? aaa.addClass("tabin");
?????
???? }, 300);
???
??? }).mouseout(function(){
?????? clearTimeout(timeoutid);
??? });
??? });
?? });
?????
??
??
?//动态装载
?
?
?</script>
</head>
<body>
<ul id="tabFirst">
? <li />
</body>
</html>
