Geek Answers Handbook

Using jQuery UI tabs with custom HTML layout

The markup required by the jQuery UI tabs is similar to the following ...

<ul> <li>Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div> Panel 1 </div> <div> Panel 2 </div> <div> Panel 3 </div>

This is good enough in some cases, but in other cases where SEO and usability are top priorities, this markup is no better. I would have jQuery UI working tabs with the following markup ...

 <div id="tabs"> <div class="panel"> <h3>Tab1</h3> Panel content 1 </div> <div class="panel"> <h3>Tab2</h3> Panel content 2 </div> <div class="panel"> <h3>Tab3</h3> Panel content 3 </div> </div>

Is it possible?

I found here ( http://christianyates.com/blog/semantic-tabs/semantic-tabs-jquery ) another plugin that solves this problem, but I would use the jQuery UI Tabs plugin.

+4
source share
2 answers

Now it is not available with jQuery user interface tabs. on jQuery forums the status of such a request will be “we will think about it” (ref: http://forum.jquery.com/topic/new-markup-structure-for-tabs )

The same person suggested the changes as follows: http://fittopage.org/2010/05/tabs-done-right/

0
source

I recommend the jQuery UI style. It is less complex and less coding. He will probably not lag behind SEO.

0
source

More articles:


All Articles