When click 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 this html snippet?
Sorry to update late,but I don't mean to use any libs here,so none of jQuery or any other libs.
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 (i.e. a click on a tab sends a new page request to the server - the server constructs HTML that has the visual appearance of tabs).
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
If "simple and compatible" are your only two criteria, I'd suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.
Depending on your ambitions, it could simply be a matter of an unordered list and a number of <div>s (tab contents). Then a simple JavaScript could - by means of getElementById() - set the display property for all the <div>s: none for all except the current.
Alternatively, you could have a look at this.
Edit: Not the only one linking to the jQuery site, it seems :)
Here is a list of different types of tabs plus tutorials on how to build them
If you want to roll your own tab control, you could do something like this:
<html>
<head>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="javascript:activateTab('page1')">Tab 1</a>
</li>
<li>
<a href="javascript:activateTab('page2')">Tab 2</a>
</li>
...
</ul>
<div id="tabCtrl">
<div id="page1" style="display: block;">Page 1</div>
<div id="page2" style="display: none;">Page 2</div>
...
</div>
</body>
</html>