Use jquery to implement div tab switching instance code

JQuery implements the simple effect of implementing the Tab switch using js Code not long before jQ to write. Now we use jQ to write:
HTML code:
Copy codeThe Code is as follows:
<Div id = "sidebar-tab">
<Div id = "tab-title">
<H3> <span class = "selected"> latest comments </span> <span> recent hot reviews </span> <span> random articles </span> </Div>
<Div id = "tab-content">
<Ul> <li> 1234567890-1 </li> </ul>
<Ul class = "hide"> <li> 1234567890-2 </li> </ul>
<Ul class = "hide"> <li> 1234567890-3 </li> </ul>
</Div>

</Div>

Css code:
Copy codeThe Code is as follows:
# Sidebar-tab {border: 1px solid # ccf; margin-bottom: 1.5em; overflow: hidden ;}
# Tab-title h3 {color: #666; font-size: 15px; font-weight: 400 ;}
# Tab-title. selected {color: #356aa0; border-bottom: 0px;}/* style when the title is selected */
# Tab-title span {padding: 5px 9px 5px 10px; border: 1px solid # ccf; border-right: 0px; margin-left:-1px; cursor: pointer ;}
# Tab-content. hide {display: none;}/* display the first part of content by default, and hide others */
# Tab-content ul {padding: 5px 10px; overflow: hidden ;}
# Tab-content ul li {padding-top: 5px; height: 20px ;}

JQ code:
Copy codeThe Code is as follows:
<Script language = "javascript">
$ ('# Tab-title span'). click (function (){
$ (This ). addClass ("selected "). siblings (). removeClass (); // removeClass is to delete other classes; only the current object has addClass ("selected"); siblings () indicates the same level element of the current object, and removeClass indicates to delete;
$ ("# Tab-content> ul"). hide (). eq ($ ('# tab-title span'). index (this). show ();
});
</Script>

It is easy to write with jQ. First, find the child element in the ID and add the event click to introduce the function. After the same level element is found, removeClass (); display: "none" when other same level elements are this.

The original jQ code is as follows:
Copy codeThe Code is as follows:
<Script>

$ ('# Tab-title span '). click (function () {$ (this ). addClass ("selected "). siblings (). removeClass (); $ ("# tab-content> ul "). slideUp ('20140901 '). eq ($ ('# tab-title span '). index (this )). slideDown ('20140901 ')
});
</Script>

When you trigger the current event and then click the current event, it will trigger it; if you do not need to click the current event, it will trigger the event (this );