The tabs component is simple and flexible that allows you to easily add tabs to your web page.
Supported browsers: Microsoft Internet Explorer 6+, Mozilla Firefox 3+, Apple Safari 3+, Google Chrome 1+
Page Time (24-hour): • Refresh This Page
You can pass options as key/value object to the component's function.
| Key | Type | Default Value | Description |
|---|---|---|---|
| strRegionId | string | region-middle | The container that surrounds the markup structure of all tabs and panels. Requires a CSS id. |
| strContainerPanelsSelector | string | .panels | Find all panels by selector inside the region. Requires a CSS selector. |
| strSelectedTabCss | string | tab-selected | The selected tab. Requires a CSS class name. |
| strSelectedPanelCss | string | panel-selected | The selected panel. Requires a CSS class name. |
| intTabOpenIndex | integer | 0 | Select default tab on load. |
1. Include required dependencies.
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/diehard_tabs.js" type="text/javascript"></script>
2. Add required markup structure using HTML.
<ul class="tabs">
<li class="tab"><a href="#panel1"><span>Tab 1</span></a></li>
</ul>
<div class="panels">
<div id="panel1" class="panel">
Panel 1
</div>
</div>
3. Add required style using CSS.
.tabs {float:left;width:auto;margin:0 0 -1px 0;padding:0;border-right:solid 1px #1860a8;}
.tabs .tab {float:left;width:auto;border:solid 1px #1860a8;border-right:0;list-style-type:none;text-decoration:none;font-size:100%;}
.tabs .tab a {float:left;width:auto;padding:8px 12px;background:#fff;text-decoration:none;color:#999;}
.tabs .tab a:hover {background:#eee;color:#666;}
.tabs .tab-selected {border-bottom:solid 1px #1860a8;}
.tabs .tab-selected a, .generic-tabs .generic-tab-selected a:hover {background:#ddd;color:#000;}
.panels {border-top:solid 2px #1860a8;clear:both;}
.panels .panel {display:none;}
4. Add and run the code using JavaScript.
$('.tabs').diehard_tabs();
Created by William Chang