Mouse move into the tab when there will be a certain delay will switch to the corresponding items, to prevent users inadvertently mouse operation, click the corresponding items can also switch
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>tab Tab Switch </title>
<style>
body{background: #fff;}
*{margin:0; padding:0;}
. box{margin:20px;}
. Container{background: #FFF; width:500px; clear:both; margin-top:1px; _margin-top:-1px;}
. sub-con{height:300px width:500px;border:1px solid #3CF; background: #FFF; display:none;
. cur-sub-con{Display:block;}
. Sub-con a{line-height:40px}
. Sub-con p{Text-align:center}
. nav{width:370px; height:28px; margin-left:10px;}
. Nav ul{width:370px; height:28px;}
. Nav ul li{list-style:none; display:inline-block;width:60px; height:28px;line-height:28px; text-align:center; margin-left:-9px;*float:left;*margin-left:-1px;}
. Nav ul Li a{background: #fff; border:1px solid #3CF; text-decoration:none; color: #000; height:28px;display:block;}
. Nav ul Li a:hover{background: #CCEDFB}
. Nav ul Li a.cur{z-index:9999;border-bottom:1px solid #FFF; color: #F00;}
</style>
<body>
<div class= "box" >
<div class= "NAV" >
<ul>
<li><a href= "javascript:void (0)" class= "cur" >tab item 1</a></li>
<li><a href= "javascript:void (0)" >tab Item 2</a></li>
<li><a href= "javascript:void (0)" >tab Item 3</a></li>
<li><a href= "javascript:void (0)" >tab Item 4</a></li>
</ul>
</div>
<div class= "Container" >
<div class= "Sub-con cur-sub-con" > <a href= "#" title= "This is the container 1" > This is the container 1</a><p></p></div>
<div class= "Sub-con" > <a href= "#" title= "This is the container 2" > This is the container 2</a><p></p></div>
<div class= "Sub-con" > <a href= "#" title= "This is the container 3" > This is the container 3</a><p></p></div>
<div class= "Sub-con" > <a href= "#" title= "This is the container 4" > This is the container 4</a><p></p></div>
</div>
</div>
</body>
<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"). MouseOver (function () {
curli=$ (this);
Intervalid=setinterval (onmouseover,250);//When the mouse moved into a certain time delay will switch to the item, to prevent users from inadvertently operating
});
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 () {//mouse clicks can also switch
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>
