jquery simple few lines of code show tab switch

HTML code:

<div class= "Ry_jj_tab" >
<div class= "Tab_box" >
<a href= "#tab1" class= "selected" onclick= "Js_method (); return false;" > Basic Information </a>
<a href= "#tab2" onclick= "Js_method (); return false;" > Honor and Evaluation </a>
<a href= "#tab3" onclick= "Js_method (); return false;" > Representative Performance </a>
<a href= "#tab4" onclick= "Js_method (); return false;" > Social Activities </a>
<a href= "#tab5" onclick= "Js_method (); return false;" > Major Publications </a> </div>
<div class= "Tab_main tab_main1" id= "Tab1" > <!--<span class= "XX" ></span>--

<div class= "Tab_main_box" > {dede:field.jibenxinxi/} </div>
</div>
<div class= "Tab_main tab_main1" id= "tab2" style= "Display:none;" > <span class= "xx" ></span>
<div class= "Tab_main_box" > {dede:field.rongyu/} </div>
</div>
<div class= "Tab_main tab_main1" id= "Tab3" style= "Display:none;" > <span class= "xx" ></span>
<div class= "Tab_main_box" > {dede:field.yeji/} </div>
</div>
<div class= "Tab_main tab_main1" id= "Tab4" style= "Display:none;" > <span class= "xx" ></span>
<div class= "Tab_main_box" > {dede:field.shehuihuodong/} </div>
</div>
<div class= "Tab_main tab_main1" id= "Tab5" style= "Display:none;" > <span class= "xx" ></span>
<div class= "Tab_main_box" > {dede:field.zhushu/} </div>
</div>
</div>

Here is the JS code

<script>
$ (document). Ready (function () {

$ (function () {
$ (". Tab_box > A"). On ("click", Function () {//give. Tab_box > A This object to bind a fixed-point click event
var index = $ (this). index ();//Gets the indexed value of the clicked object to the variable in index
$ (this). AddClass ("selected"). Siblings (). Removeclass ("selected");//Click on object highlighting, sibling node Delete highlight
$ (". Tab_main1"). EQ (index). CSS ("Display", "block"). Siblings (". Tab_main1"). CSS ("display", "none");//Want to display the clicked content, Other non-node content hiding
})
})

})
</script>

PS: Never understood $ (this) the variable is what it is, and today we finally realize that this is the object of the current event, index () indexed value, $ (this). Index () Click on the indexed value of the object.

jquery simple few lines of code show tab switch