JQuery tab Options Carter-Effect code

HTML code

The code is as follows	Copy Code
<div class= "tab" > <ul class= "Clearfix" > <li class= "Current" ><a href= "#" > tags 1</a></li> <li><a href= "#" > tag 2</a></li> <li><a href= "#" > tag 3</a></li> </ul> <div class= "Current" > </div> <div> </div> <div> </div> </div>

jquery Code

The code is as follows

Copy Code

function Zvtab () { $ (". Tab ul Li"). each (function (index) { $ (this). MouseOver (function () { var t = $ (this); Timeoutid = settimeout (function () { $ (". Tab UL li.current"). Removeclass ("current"); T.addclass ("current"); $ (". tab div.current"). Removeclass ("current"); $ (". Tab div"). EQ (index). addclass ("current"); },300); }). mouseout (function () { Cleartimeout (Timeoutid); }); }); }

Of course, this JS code should be introduced in the JQ library and be executed before it is available.

code is as follows

copy code

. tab UL Li { Float:left;background: #CCC; margin-right:2px;border-bottom:2px solid #DDD;} . tab UL li.current{background: #AAA; border-bottom:2px solid #AAA;} . tab UL Li A{color: #000;d isplay:block;padding:5px 10px;} . tab UL li.current a{color: #fff;d isplay:block;padding:5px 10px;} . tab Div{display:none;} . tab div.current{display:block;background: #AAA; color: #fff;p adding:5px;margin-bottom:10px;