Adding jQuery is Easy

You’ll need to include a few JavaScript libraries in order to use jQuery tabs at all. These libraries can be somewhat cumbersome for users on slower connections to download, and it’s definitely the major disadvantage of using a library like jQuery to add this sort of functionality to your site. The best things we can do in this case is try to minimize the effect of serving this JS library to our clients. First of all, I would recommend always using the “minified” version of the jQuery script. It’s much smaller in size than the standard version, which obviously will reduce the amount of time needed to load your site when users first visit it. The only difference between the minified and the standard library is that the good folks at jQuery have removed all sorts of characters in the document, which makes it less readable, but makes the file size much smaller. If you want to delve into the depths of the jQuery library, you can download the standard version and take a gander offline, but don’t force your users to download the full version if you don’t have to.

Additionally, Google (here) and Microsoft (here) have both set up distribution networks to serve these libraries to your users. Don’t waste bandwidth and your clients’ time by forcing users to download these libraries from your servers! Chances are, Google/Microsoft have the resources to serve these files to you users faster and more reliably than you can, so please utilize these free services. Additionally, users have a much greater chance of already having a cached version of these files when you used the shared location. Sweet!

Add the library references to your <head/> to get started.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

The Tabs Markup

What’s so wonderfully beautiful about jQuery tabs is the simplicity of the HTML. Even more, users who aren’t using JavaScript will visit your site and see a perfectly formatted and functioning page. Use this as a template for your tabs HTML:

<div class="ui-tabs">
	<ul class="ui-tabs-nav">
		<li><a href="#tabs-1">Tab One</a></li>
		<li><a href="#tabs-2">Tab Two</a></li>
		<li><a href="#tabs-3">Tab Three</a></li>
	</ul>
	<div id="tabs-1" class="ui-tabs-panel">
		<p>Content one.</p>
	</div>
	<div id="tabs-2" class="ui-tabs-panel">
		<p>Content two.</p>
	</div>
	<div id="tabs-3" class="ui-tabs-panel">
		<p>Content three.</p>
	</div>
</div>

Add Some Style

This is where my template really starts to differ from jQuery’s version. The CSS jQuery would have you use is not simple enough for me, so I created my own version of the CSS that will give you a very basic frame onto which you can apply your own design. Here’s what I like to start with:

.ui-tabs {
	zoom: 1;
}
.ui-tabs .ui-tabs-nav {
	list-style: none;
	position: relative;
	padding: 0;
	margin: 0;
}
.ui-tabs .ui-tabs-nav li {
	position: relative;
	float: left;
	margin: 0 3px -2px 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
	display: block;
	padding: 10px 20px;
	background: #f0f0f0;
	border: 2px #ccc solid;
	border-bottom-color: #ccc;
	outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	padding: 10px 20px 12px 20px;
	background: #fff;
	border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
	cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	clear: both;
	border: 2px #ccc solid;
	padding: 10px;
}
.ui-tabs .ui-tabs-hide {
	display: none;
}

Now Make it Do Something

Now that you have your tabs there, you’ll have to initialize them with a simple jQuery statement in order for them to work. Just add this line of JavaScript anywhere on your page.

<script type="text/javascript">
	$(document).ready(function(){
		$(".ui-tabs").tabs();
	});
</script>

The Result

Once you’ve added each of these elements to your page, you should get a very simple tab structure that awaits your styling genius. Just modify the CSS to apply your own design!

Now you’ve got it. Good luck, and happy styling.

When I use the term “DHTML,” I am referring to “Dynamic HTML.” This is an endearing term that many web designers use to describe the fusion of HTML with other web technologies, such as JavaScript and CSS. By using various technologies in tandem, we can create dynamic controls that allow website visitors to interact with content directly on the page without the need to refresh the site with every subsequent click.

The HTML

As you will soon see, the tab strip is a prime example of a DHTML control. Before we delve into every aspect of the tab strip, let’s first start with the HTML:

<div class="tabStrip">
	<ul>
		<li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
		<li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
		<li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
	</ul>
</div>
<div class="tabContentActive" id="tabContent1">
	This is sample tab content (1).
</div>
<div class="tabContent" id="tabContent2">
	This is sample tab content (2).
</div>
<div class="tabContent" id="tabContent3">
	This is sample tab content (3).
</div>

The HTML is relatively simple. We are using an unordered list (<ul/>) for our tabs, and we are using <div/> tags for our tab content. As you can see, I am giving a unique id attribute to each tab link and to each tab content <div/>. This is important, as we’ll need unique id‘s in order to access these elements with JavaScript.

The JavaScript

We are using only one small JavaScript function for the tab control. Here is the code:

<script type="text/javascript" language="javascript">
	var activeTab = 1;
	function openTab(tabId) {
		// reset old tab and content
		document.getElementById("tabLink"+activeTab).className = "tabLink";
		document.getElementById("tabContent"+activeTab).className = "tabContent";
		// set new tab and content
		document.getElementById("tabLink"+tabId).className = "tabLinkActive";
		document.getElementById("tabContent"+tabId).className = "tabContentActive";
		activeTab = tabId;
	}
</script>

The CSS:

This CSS is a very basic example of what you can do to style your tabs. You can add colors, gradients, and background images to give the control even more design flare.

.tabStrip ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.tabStrip li {
	margin: 0 2px 0 0;
	list-style-type: none;
	float: left;
}
.tabLink {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e8e8e8;
	border: #dadada solid;
	border-width: 1px 1px 0 1px;
	color: #8a8a8a;
}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e0e0e0;
	border: #c0c0c0 solid;
	border-width: 1px 1px 0 1px;
	color: #0066ff;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;
	clear: both;
	background: #f0f0f0;
	border: 1px #dedede solid;
	padding: 10px;
}

The Result:

In true DHTML fashion, we have combined HTML, JavaScript, and CSS to create a fully dynamic user control that can appear anywhere on the web. I have taken the fundamentals learned in this tutorial and have created a more visually appealing example of this code. Click on the image below to see the demo.

Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.

Seeing is believing, so without further adieu…

View the Karate Corners Demo by clicking here.

Update: Read my subsequent post for a more advanced example of this technique!
Update: Read a even more advanced version of this technique in an even newer tutorial!
Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery.

I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. I’ve tested this on Internet Explorer 6, IE 7, Mozilla FireFox 2, Firefox 3, Opera 9, and Safari 3.

The Code

The HTML code is relatively simple. You have an outer <div> tag with four “corner” <div>s inside of it. Each of these corner <div>s are positioned with CSS so that they always appear at each corner of the outer <div> box.

HTML:

<div class="cornerBox">
    <div class="corner TL"></div>
    <div class="corner TR"></div>
    <div class="corner BL"></div>
    <div class="corner BR"></div>
    <div class="cornerBoxInner">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CSS:

.cornerBox {
	position: relative;
	background: #cfcfcf;
	width: 100%;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}
.cornerBoxInner {
	padding: 10px;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}

The Image

Only one image is used for this box (shown above). In my example, I created a 20×20 circle, which is comprised of four 10×10 corners. By shifting the background image around, you can eliminate the need to download four separate GIF files on each of your boxes.

The Result

Karate Corners! Click on the image above to see the HTML demo. Happy styling!