Tabbed Views
If you are using horizontal tabbed navigation on a page, this is how it should be coded and how it will look. There are two kinds of tabbed navigation, one that is using page reload and one utilizing the jQuery UI Tabs plugin for in-page navigation.
Non JavaScript Tabbed View
For non-JavaScript full page requests for each tab, use the following code:
<div class="tab-sub-menu">
<ul>
<li><a href="#">Mina ärenden</a></li>
<li><a href="#" class="active">Nytt ärende</a></li>
<li><a href="#">Arkiv</a></li>
<li><a href="#">Mina uppgifter</a></li>
</ul>
</div>
<p>Put your tabbed content, tables, forms etc. here.</p>
The active tab have the class active in the a tag. Rendered result:
Put your tabbed content, tables, forms etc. here.
JavaScript Enabled Tabbed View
If you want to use in-page navigation without page reload you should use the jQuery UI Tabs Plugin available from the asset host, see instructions how to enable the plugin.
<div id="tab-element-container">
<ul>
<li><a href="#tab-element-1">Tab 1</a></li>
<li><a href="#tab-element-2">Tab 2</a></li>
<li><a href="#tab-element-3">Tab 3</a></li>
</ul>
<div id="tab-element-1">
<h2>Tab 1</h2>
<p>Tab 1 contents</p>
</div>
<div id="tab-element-2">
<h2>Tab 2</h2>
<p>Tab 2 contents</p>
</div>
<div id="tab-element-3">
<h2>Tab 3</h2>
<p>Tab 3 contents</p>
</div>
</div>
If you don't use the id tab-element-container for the container at row 1 above, you will have to activate the tabs widget by attaching the tabs plugin to a DOM element in to your JavaScript file like so:
jQuery(document).ready(function($) {
$("#my-tabs").tabs();
});
Rendered result:
