jquery implements tabs with nested features _jquery

About the tab feature we must all be unfamiliar, nothing more than the mouse click or suspension can switch related content.
Typically, you see the tabs are not nested functions, that is, the completion of a layer of switching effect, this section to share a code example, the implementation of the tab nesting functions, that is, the tab nested tab function, it can accommodate more content. The
code is as follows:

The code above implements the nested function of the tab, and the following describes its implementation process.
I. Principles of implementation:
The principle is very simple, in fact, is a big tab inside a small set of tabs, the first big tab switch, and then the Small tab switch, it is so simple, here is not much introduced, the specific can see code comments.
two. Code Comments:
1.$ (function () {}),The document structure is completely loaded and then executes the code in the function.
2.$ ("#title li:first"). AddClass ("new"). Siblings (). addclass ("old"),By default, the first LI element under the element title for the id attribute is added with the class class named New, and then the class class of the old is added for the other sibling Li elements. Which is the Horizontal tab in the default state. The first font is red, and the rest is black.
3.$ ("#content Div:first"). Show (). siblings (). Hide (),Set the ID to the first div under content to show that the other sibling elements are hidden.
4.$ (". Incontent:first"). Show (). siblings (). Hide (),Sets the first element of the class attribute value to Incontent to display, and the sibling element is hidden.
5.$ ("#title li"). Click (function () {}),Registers the Click event handler for the corresponding LI element.
6.$ (this). addclass ("new"). Removeclass (' old '). Siblings (). addclass ("old"). Removeclass ("new"),If you click on the LI element at the top, add the class class named new to the current Li element, and then delete class class named Old, and then add other sibling elements to the class classes named Old, and delete class class named New.
7.$ (". Info"). Hide (). EQ ($ ("#title li"). Index (this). Show (),First hides the element with the class name info, and then displays the elements of the corresponding index.
8.$ (". Info div:first-child"). Show (). siblings (). Hide (),Set the first child element under the DIV element below info to show that the other elements are hidden.

The above is the detailed content of this article, I hope to realize the jquery tab is helpful.