What is the elegant way to create HTML horizontal tabs?

I am going to make a HTML web page. I am wondering what is the most elegant way to create HTML horizontal tabs (as a navigation bar) ?

I would like to have selected tab and unselected tab have different colors.

I guess I should use CSS for styling开发者_运维百科 and maybe jQuery to show and hide different content under different tab?

Use the jQuery UI Tabs module.

http://jqueryui.com/demos/tabs/

There's a wonderful article on http://alistapart.com regarding the CSS »sliding doors« technique how to add tabbed navigation to a site. It's plain HTML, but I'm sure you can combine it with javascript.

Typical best practice is to use <li> elements for tabs and menus (with a <ul> as a container for a tab group), and style them accordingly.

The key bits of styling are:

float:left;  --or--  display:inline-block;
list-style:none;

float:left; and display:inline-block; both acheive similar effects in that they cause the list items to be displayed in a horizontal row. They achieve it in quite different ways, which may have an impact on other aspects of your styling, but either can be used, depending on which you're more comfortable with. (the only caveat is if you need to support IE6, in which case inline-block doesn't work, but there are work-arounds for this)

list-style:none; tells the list items not to display the bullet point that they would normally be given.

Beyond those two styles, you can use virtually any CSS you like to get them to look exactly how you want. Typically tabs have borders around three sides, rounded corners, highlight the active tab and if you hover over them... all these effects can be achieved with CSS.

This article gives a good walk through of how to achieve all these effects and more. There are a number of other good tutorials on the web as well.

Hope that helps.

Refer this URL's, it may help you:- 2 level tabs and css horizontal tabs