Tabs Component by William Chang

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+

Features

Demo

Page Time (24-hour): Refresh This Page

Panel 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Panel 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.

Panel 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Panel 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.

API and Options

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.

Usage

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();
	

Downloads

Created by William Chang

W3C XHTML Compliant W3C CSS Compliant