Html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title>jquery Instance-label page effect </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link type= "Text/css" rel= "stylesheet" href= "Css/base.css"/>
<link type= "Text/css" rel= "stylesheet" href= "Css/tab.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" src= "Js/hdtabs.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #tab '). Hdtabs ();
})
</script>
<body>
<div id= "tab" class= "tab" >
<ul>
<li> label 1</li>
<li class= "Tabin" > Label 2</li>
<li> label 3</li>
</ul>
<div class= "Content" >
<div class= "Contentin" > I am Content 1</div>
<div> I am content 2</div>
<div> I am content 3</div>
</div>
</div>
</body>
Css
. tab UL Li {
Float:left;
Background-color: #868686;
Color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
Cursor:pointer;
}
. tab UL Li.tabin {
Background-color: #6E6E6E;
border:1px solid #6E6E6E;
}
. tab Div.content {
Clear:left;
Background-color: #6E6E6E;
Color:white;
width:300px;
height:100px;
padding:10px;
}
. tab Div.content div{
Display:none;
}
. tab div.content. Contentin {
Display:block;
}
Javascript
(function ($) {
$.fn. Hdtabs=function (settings) {
Settings=jquery.extend ({
"Time": 300
},settings)
$.fn. Hdtabs.show ($ (this), settings);
};
$.fn. Hdtabs.show=function ($this, settings) {
var t= ';
$this. Children (' ul '). Children (' Li '). MouseOver (function () {
var _this=$ (this);
T=settimeout (function () {
$this. Children (' ul '). Children (' Li '). Removeclass (' Tabin ');
_this.addclass (' Tabin ');
$this. Children ('. Content '). Children (' div '). Hide ();
$this. Children ('. Content '). Children (' div '). EQ (_this.index ()). Show ();
},settings.time);
});
$this. Children (' ul '). Children (' Li '). Mouseout (function () {
Cleartimeout (t);
});
}
}) (JQuery)