Lightweight tabs for your web apps
There are many different solutions for creating tabbed content in HTML pages. For a number of my apps, I needed a simple, lightweight solution that was easy to use and to integrate with my apps. I came up with a simple solution and am sharing it here. Hopefully someone will find it useful.
The solution consists of a table containing the tabs and DIV’s representing the content for each tab. The tabs table has one cell for each tab with ID of “Tab_n” where n starts with 0 and increases by 1 for each tab. Add an onClick handler for each cell that calls tabClickHandler(n). Finally, create a DIV for each tab’s content and set its ID to be “Panel_n” where n starts with 0 and increases by 1 for each tab. Add a style attribute of “display: none” for all DIVs representing the tab content except for the first, which should be set to “display:block”.
| ABC | DEF | GHI | JKL |
