Write the tab sliding door by yourself based on jquery (General Edition)

Css: Copy codeThe 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:Copy codeThe 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:Copy codeThe Code is as follows: <div class = "main">
<Div class = "main_top">
<Ul>
<Li class = "h_hou" onmouseover = "tabchange (this, 'main', 'main _ content', 'H _ qian ', 'H _ hou ') "> Module 1 </li>
<Li class = "h_qian" onmouseover = "tabchange (this, 'main', 'main _ content', 'H _ qian ', 'H _ hou ') "> module 2 </li>
<Li class = "h_qian" onmouseover = "tabchange (this, 'main', 'main _ content', 'H _ qian ', 'H _ hou ') "> Module 3 </li>
</Ul>
</Div>
<Div class = "main_content"> 1st
</Div>
<Div class = "main_content" style = "display: none;"> 2nd
</Div>
<Div class = "main_content" style = "display: none;"> 3rd
</Div>
</Div>

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