JS实现标签页效果(配合css)不同标签下对应不同div

显示页面tab.jsp

<%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %>
<! 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 > 标签页效果 </ title >
< link   href = "tab.css"   rel = "stylesheet"   type = "text/css"   />
< script   language = "JavaScript"   type = "text/javascript"   src = "jquery-1.5.1.js" ></ script >
< script   language = "JavaScript"   type = "text/javascript"   src = "tab.js" ></ script >
</ head >
< body >
< ul   id = "tabfirst" >
< li   class = "tabin" > 标签1 </ li >
< li > 标签2 </ li >
< li > 标签3 </ li >
</ ul >
  < div   id = "contentnow"   class = "contentfirst contentin" > 我是内容1 </ div >
< div   id = "contentnow"   class = "contentfirst" > 我是内容2 </ div >
< div   id = "contentnow"   class = "contentfirst" > 我是内容3 </ div >
</ body > </ html >  

tab.css

ul ,li { margin:0px;

padding:0px;

list-style:none;

}

li { float:left;

background-color:#66CC00;

margin-right:2px; //这个是设置标签之间的间距

padding:5px;

border:1px solid white;

height:20px;

color:white;

 

}

.listli { background-color:#663333;

border:1px solid #663333;

 

}

div { clear:left;

width:300px;

height:100px;

background-color:#663333;

border-top:0px;

color:white;

display:none;

}

 

.divarea { display:block; } 

 

 

tab.js

//定义全局变量
var  timeout;
$(document).ready( function (){
//找到所有的 li 标签
$( "li" ).each( function (index){
$( this ).mouseover( function (){
//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要
timeout =setTimeout( function (){
$( "div.divarea" ).removeClass( "divarea" );
$( "li.listli" ).removeClass( "listli" );
// $(" div "). eq (index).addClass(" divarea "); //另一种写法是:$(div:eq(index)).addClass(" divarea ");
$( "div:eq(" +index+ ")" ).addClass( "divarea" );
$( "li" ).eq(index).addClass( "listli" );
},
320);
$( this ).mouseout( function (){
clearTimeout(timeout);
});
});
}); });

 

 

效果图为这样

来自为知笔记(Wiz)