When you move the cursor to the Tab, there will be a certain delay to switch to the corresponding item, to prevent users from inadvertently mouse operations, click the corresponding item can also switch
:
Source code:Copy codeThe Code is as follows: <! 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> Tab switch </title>
</Head>
<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 Entry 1 </a> </li>
<Li> <a href = "javascript: void (0)"> Tab Item 2 </a> </li>
<Li> <a href = "javascript: void (0)"> Tab 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 container 1"> This is container 1 </a> <p> </p> </div>
<Div class = "sub-con"> <a href = "#" title = "this is container 2"> This is container 2 </a> <p> </p> </div>
<Div class = "sub-con"> <a href = "#" title = "this is container 3"> This is container 3 </a> <p> </p> </div>
<Div class = "sub-con"> <a href = "#" title = "this is container 4"> This is 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 is moved in, there is a certain delay to switch to the item, to prevent users from inadvertently performing operations
});
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 () {// You 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>
</Html>