Create a DHTML Tab Strip
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:
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 a unique
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.
Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.