Note: You should use CSS instead. See: CSS: Tabbed Menu .
Tabs is a web design started in ~1999. For screenshots of popular sites using tab design, see: Web Design: Survey of Tab Style 2006 .
Here's the basics.
- Each page needs to have HTML code that is a list of tabs. (this can be done using table, list, css, in many ways)
- When a page is clicked, the browser goes to that page, highlight that tab's color (or change the css in some way), and de-highlight all the other tabs.
Changing Button Appearance
On this page we use table tag. Here's the tab HTML code:
<table border="1"> <tr> <td id="a" class="tab">Tab A</td> <td id="b" class="tab">Tab B</td> <td id="c" class="tab">Tab C</td> </tr> </table> <script src="tab.js"></script>
Tab Switching Programing Logic
When a tab is clicked, there are few things that must be done:
- Open the page associated with the tab.
- Highlight that tab's color.
In bottom few lines, we set the table cell tags to have a action. When clicked, it will open the page associated with that tab.
Then, “setTabColor” is called. It first get the file path, parse it to get the file name without the extension. Then, use that as id to set the correct tab's color.