Today a sudden whim, think of a very simple way to achieve the tab effect
In fact, the logic is very simple, but see the internet basically does not write
Do not know whether there will be problems in practical application, please teach the hero
Copy Code code as follows:
<!doctype html>
<meta charset= "UTF-8" >
<title>jquery Easy Tab </title>
<style>
*{margin:0; padding:0;}
Body, UL, Li {
margin:0;
padding:0;
}
Body {
font:12px/1.5 Tahoma;
}
#outer {
width:450px;
margin:10px Auto;
}
#tab {
Overflow:hidden;
Zoom:1;
Background: #000;
border:1px solid #000;
}
#tab Li {
Float:left;
Color: #fff;
height:30px;
Cursor:pointer;
line-height:30px;
List-style-type:none;
padding:0 20px;
}
#tab Li.current {
Color: #000;
Background: #ccc;
}
#content {
border:1px solid #000;
border-top-width:0;
}
#content ul {
line-height:25px;
Display:none;
margin:0 30px;
padding:10px 0;
}
</style>
<body>
<div id= "outer" >
<ul id= "tab" >
<li class= "Current" > First lesson </li>
<li> Lesson Two </li>
<li> Lesson Three </li>
</ul>
<div id= "Content" >
<ul style= "Display:block;" >
1111
</ul>
<ul>
2222
</ul>
<ul>
3333
</ul>
</div>
</div>
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js "></script>
<script>
$ (function () {
Window.onload = function ()
{
var $li = $ (' #tab Li ');
var $ul = $ (' #content ul ');
$li. Click (function () {
$li. Removeclass ();
var $t = $ (this). index ();
$ (this). addclass (' current ');
$ul. CSS (' Display ', ' none ');
$ul. EQ ($t)-css (' Display ', ' block ');
})
}
});
</script>
</body>
Photo Demo:
The above is the full content of this article, I hope you can enjoy.
