Based on jquery, write the tab sliding door (general edition) _ jquery

Today, I will share with you my own sliding door. I also searched the internet and did not find it better. I wrote it myself ~ It is easy to write. I have encapsulated it as much as possible for ease of use. Okay, let's talk about it in a few minutes. Go directly to the Code css:

The Code is as follows:

. Main
{
Height: 360px;
Width: 290px;
Border: 1px solid #444444;
Font-size: 12px;
Color: #444444;
Margin: 20px;
}
. Main_top
{
Height: 30px;
Width: 290px;
Line-height: 30px;
Text-align: left;
Background-color: #999999;
Border-bottom: 1px solid #444444;
}
. Main_top ul
{
Padding: 0px;
Margin: 0px;
List-style-type: none;
Position: absolute;
}
. Main_top ul li. h_qian
{
Float: left;
Width: 80px;
Text-align: center;
Background-color: #999999;
Height: 30px;
}
. Main_top ul li. h_hou
{
Float: left;
Width: 80px;
Text-align: center;
Background-color: # ffffff;
Cursor: pointer;
Margin-top: 1px;
Height: 30px;
Font-weight: bold;
}
. Main_content
{
Margin: 10px;
}

Js:

The Code is as follows:

Function tabchange (obj, p, c, q, h ){
$ (Obj). parent (). find ("li"). attr ("class", "" + q + "");
$ (Obj). parents ("." + p + ""). find ("." + c + ""). hide ();
$ (Obj). attr ("class", "" + h + "");
Var j = $ (obj). index ();
$ (Obj ). parents (". "+ p + ""). find (". "+ c +": eq ("+ j + ")"). show ();
}

Html:

The Code is as follows:

• Module 1


• Module 2


• Module 3

1st

2nd

3rd

The code is very simple and I will not talk about it much. For detailed usage instructions, see the annotations in tangtab. js in the Demo.

Appendix:
Online Demo: http://demo.jb51.net/js/2012/TabDemo/
Package and download: TabDemo_jb51.rar