Would it be better to implement each tab as a different HTML layer and
have buttons control which layer shows up on top? Would it be better
instead to (re)generate HTML on the fly when the tab buttons are
pressed?
I would lean towards generating the content once and showing/hiding it on demand especially if the majority of work is done in the browser and there are no synchronous requests being made to a server when interacting with elements on the page.See footnote 1
When showing a tab's contents...
Assuming the content of each tab generates quickly, you can make your application more efficient by only creating the content for the tab when it is requested the first time. This way, if the tab is never accessed no resources are used.
When hiding a tab's contents...
When working with multimedia you may need to perform additional actions when you hide content. For example, a video won't stop playing just because you hide it. For your audio application you may need to stop playback of the current sequence.
There are many tab controls available such as jQuery UI tabs (free) and Sliding Tabs (licensed but inexpensive).
Other Scenarios
Tabs should be used for switching between major blocks of content like documents (e.g. browser tabs) and/or regularly used functionality (e.g. a personnel form which has a tab for contact information and another for employment history). Other scenarios may be better suited to a dialog (modal or non-modal).
Using the audio example, if you had a button labeled "tempo", I would expect it to open a small dialog window on top of my current view rather than taking me to a new tab. Roland's
answered 2012-04-25T19:20:54.517