Create a DHTML Tab Strip

Tab strips are commonplace throughout the web, and they’re utilized in a wide variety of ways, such as in site navigation or form wizards. Organizing links in a tabbed format can add quite a bit of style and functionality to your site, as many visitors are already familiar and comfortable with using tabs on other websites and even on other platforms such as their operating system. This tutorial shows you how to create a simple DHTML tab strip using HTML, CSS, and a small bit of JavaScript.

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.

Tab Strip Demo

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

16 comments

  1. suresh says:

    Hi.

    How can i use the scripts in IE 6 or IE 5. Please help me out..

  2. Stefan says:

    Thank you Kyle, I cannot tell you how impressed I am by this, and also the other techniques you describe (karate corners, hover, etc.).

    I sometimes use a thing called “Tabber” by barelyfitz (www.barelyfitz.com/projects/tabber/example.html). However the simplicity of your method is awesome. Your solutions for doing things as simply and elegantly as possible is a sheer joy to witness.

  3. To whom it my concern

    I have viewed on web page with TABs down the right hand side of the web page…forgot to book mark.

    They look like a folder Tab…Do you now the HTML and CSS code to do this..

    Regards
    Glen Callanan

  4. […] the article here: Create a DHTML Tab Strip | Kyle Schaeffer – Interactive Media Design Related Posts:Dynamic Drive DHTML Scripts-Tab Content Script (v 2.2) Description: This is a […]

  5. Sophie says:

    The Javascript wouldnt work for me. Says there is an error on line 7

    • Kyle says:

      Hi, Sophie. My demo (linked in the article above) seems to be working fine. Double-check the implementation steps in my article to make sure you have all the elements in place.

  6. HomeList says:

    Thank you for this quick tutorial! I now have tabs on my website

  7. Gary Campbell says:

    Excellent and thank you. I was using the jQueryUI Tab (which is nice), but I replaced it with your approach. I am loading the data for the tabs dynamically, and I can see the improvement in performance.

  8. Bart says:

    Kyle,

    Great tabs! How do you place multiple boxes with tabs on the same page?

    Thanks.

  9. navisa says:

    dear Kyle

    thank u very much. Excellent

    just I have a question

    I want to have 2 tab strip in one page!! HOW DO THIS??
    Do I need 2 java script code??

    please help me
    thanks

  10. Anna says:

    Dear Kyle,

    But, there are 2 images required in your example. I cannot download them. Can you please send them to me?

  11. Sergei says:

    Awesome; thanks for 1) sharing 2) high-quality sample/tutorial.
    – Sergei

  12. Hi,

    I use the Tabbed-style (DHTML Tab Strip) in one of our programs, but there’s a small issue that I can’t pin down. There’s a spacing or padding difference in IE vs FF between the tab strip and the main content area. FF probably has 1px while IE appears to have 5px. I don’t see this originating from my master CSS, I only split the CSS / Javascript / DHTML. Do you any suggestions on closing the gap?

    Thank you,

    Mario Stevenson

  13. Manju says:

    Hi,
    Am a final year student and am having a mini project on my odd semester.. your tutorial was very helpful to my project and i can understood easily.. Thanks thanks a lot…………………..:)

  14. achilles says:

    hey, great job on this script. i was wondering how can i add more than one of these one a webpage

  15. Sanjay says:

    It was very helpful. Thanx a ton was very helpfull