Tabs created in jquery + CSS

Now look at the sharp jquery... the benefit is not too small... the following... is a class note... the students who need it can handle the emergency ....

CSS Section

<Style type = "text/CSS">
. Hide {display: none ;}
Ul {list-style: none ;}
Li {width: 120px; float: Left ;}
. Tab_box Div {border: 1px solid # a0a0a4; width: 500px;/* Text-align: ecnter; */height: 100px; line-Height: 100px ;}
. Tab_menu {width: 500px; Height: 20px ;}
. Tab_box {margin: 1px 0 0 0 ;}
. Selected {padding: 2px 2px 0 2px; Background-color: #808080; border-bottom: 1px solid #808080 ;}

/* Border-bottom: 1px solid #808080 --- this is very important. compatible with ff and ie8...... if this FF is not added, there will be 1px blank ...*/
</Style>

Div

<Div class = "tab">
<Div class = "tab_menu">
<Ul>
<Li class = "selected"> current events </LI>
<Li> sports </LI>
<Li> entertainment </LI>
</Ul>
</Div>
<Div class = "tab_box">
<Div> current events </div>
<Div class = "hide"> sports </div>
<Div class = "hide"> entertainment </div>
</Div>
</Div>

Jquery Section

$ (function () {
var $ div_li = $ ("Div. tab_menu ul li ");
var $ Div =$ (" Div. tab_box> Div ");
$ div_li.click (function () {
$ (this ). addclass ("selected "). siblings (). removeclass ("selected");
var Index = $ div_li.index (this);
$ Div. eq (index ). show (). siblings (). hide ();
});