How do I make a tabbed view in HTML?

Question

When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on.

What\'s the most simple and compatible way of constructing a HTML snip

Answer 1

If "simple and compatible" are your only two criteria, I'd suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.

Answer 2

If you're open to using JavaScript, jQuery's tab is pretty nice.

Answer 3

TabTastic is a good guide — it is accessible, and (when JavaScript is not available) fails very gracefully.

Answer 4

Take a look at an example such as this (courtesy of a Google search for 'tabbed view javascript').

You can obviously use this with a little customisation, but it's instructive to take it apart and determine what it's doing. It's basically enabling or disabling <div> using the display style and setting it to block or none

Answer 5

The tabs widget in jQuery UI is easy to use: http://jqueryui.com/demos/tabs/.

The jQuery tabs widget works completely on the browser side - content for all tabs are sent on every request, or you could write JavaScript code that uses Ajax to load the tab contents dynamically.

But it might not be appropriate for your use. Consider if you need to control the tabs server-side (that is, a click on a tab sends a new page request to the server - the server constructs HTML that has the visual appearance of tabs).

Answer 6

Here is a list of different types of tabs plus tutorials on how to build them