css - two level tabs jquery -
I need two level tab navigation.
Basically this way:
Tab 1 Tab 2 Tab3
TabA TabB TabC
When User Clicks for Example 2 Then he can choose again from the second level tab (tabs, tabab, etc).
I can fix the first level but I can not make the second level. How can I put it in the first level tab?
Just nested the second set of tabs to your HTML set:
< Pre> & lt; Div id = "tabs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# tab-1" & gt; & Lt; Span & gt; A & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Tab2" & gt; & Lt; Span & gt; Two & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# tab3" & gt; & Lt; Span & gt; Three & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "tab-1" & gt; & Lt; P & gt; The first tab is active by default. & Lt; / P & gt; & Lt; P & gt; The second tab includes nested tabs. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "tab-2" & gt; & Lt ;! - Nested tabs! - & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# nested-1" & gt; & Lt; Span & gt; A & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#Nested-2" & gt; & Lt; Span & gt; Two & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# nested-3" & gt; & Lt; Span & gt; Three & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "nested-1" & gt; Nest Tab 1 Content: The only content is used for the sole, integer, and non-duplicate .. & lt; / Div & gt; & Lt; Div id = "nested-2" & gt; Nest Tab2 Content: Torum Exposure Darrel Etet, Public Technologies Elite, Sade La Enrimidi .. .. Prepare both on the document and in such a way:
& lt; Script & gt; $ (Document) .ready (function () {$ ("# tab"). Tab (); $ ("# tab-2"). Tab ();}); & Lt; / Script & gt;
In doubt, see the jQuery tab API documentation on
Comments
Post a Comment