多个标签页内容相同

Question

There are 6 divs on the page:

ABCDEFG

I want to reuse those divs to display content based on the tab.

For example:

Tab1 = AB

Tab2 = AC

Tab3 = ABC

and so on...

What would be the best way to do it( jQuery? ) Any examples?

Answer 1

You can change the parent of the control on tab change which you want to reuse, eg something like:

A.parent=Tabcontroll.tabindex[1];

Not correct syntax but you get the idea.

Answer 2

TabTastic是一种不错的，可访问且带有体面文档的方法。

Answer 3

Have a DIV which encloses the entire area controlled by the tabs. Add and remove CLASSes 'tab1', 'tab2', 'tab3' to that outer DIV based on the selected tab. Have CSS rules which display the proper internal DIVs based on the enclosing CLASS. For example:

#A, #B, #C, #D, #E, #F {display:none}

.tab1 #A, .tab1 #B {display:block}

.tab2 #A, .tab2 #C {display:block}

.tab3 #A, .tab3 #B, .tab3 #C {display:block}

Answer 4

You can implement with below logic.

Render 6 div and make it style="display: none;"

You can use jQuery UI tabs. Refer this link

Design your tabs as explained in jQuery UI tabs and click of tabs populate its html or data after getting from hidden divs.

For more you can check below fiddle demo prepared. Remember its only sample and the idea to implement your desired functionality

Check this fiddle