Tabs and No Javascript Support

[BorysSokolov]

The website I'm currently working on requires for a tabbed menu one of the pages, much like the one on a user profile page of this site. I originally intended to use Bootstrap to make the tabs, but I also need support for users without Javascript. Is there any way to make the page so that users with JS enabled could browse the tabs without refreshing, while users with JS disabled could still view the content the old fashion way?

[kicken]

Yes, such a concept is known as Progressive Enhancement. Basically write the HTML in a way that works well without javascript, then use JS to modify it if necessary and add all the event handling. Eg, for tabs you'd maybe do something like:

<ul class="tab_menu">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab2">Tab 3</a></li>
</ul>
<div id="tab1">
  <noscript><h1>Tab 1</h1></noscript>
  Tab 1 content
</div>
<div id="tab2">
  <noscript><h1>Tab 2</h1></noscript>
  Tab 2 content
</div>
<div id="tab3">
  <noscript><h1>Tab 3</h1></noscript>
  Tab 3 content
</div>

Without JS the user would just see a list of links at the top, and clicking the link would take them to the appropriate content section. If JS is enabled then the HTML/CSS gets modified to create the tab layout and let the user switch content sections by clicking the tab link.

 

Any well-written tab control script would allow for this type of setup. JqueryUI's and YUI's both work similarly to this. I'm not overly familiar with bootstrap but a quick glance at it's documentation seems to indicate it also follows a similar pattern as what I showed.