Simplest Tab Panel in CSS

A Tab Panel may be achieved with just CSS, and with some optional lines of JavaScript, no need for an Ajax framework.

How it works

Each tab is associated to a URL for a page to load. The tabs are based on tags links, clicking on a tab is as to click on a link.

The tabs may be used with no JavaScript if each page has the same panel of tabs and replaces the current page.
But if you want to load another page into an iframe, without leaving the current page, a JavaScript code is used to read the URL of the page associated with a tab, and to assign it to the src property of the iframe.

Both cases will be seen in the demonstration.

CSS code

The use of <li> and <a> tags will greatly help us and makes the code a lot simpler.

The description of the layout of the Tab Panel is as follows:

<div id="tabs"> 
      <ul> 
          <li> <a href="#" rel="url1"> Name 1 </ a> </ li> 
          <li> <a href="#" rel="url2"> Name 2 </ a> </ li> 
      </ ul> 
 </ div>
<iframe id="container"> </ iframe>

This will be the exclusive role of CSS descriptors to transform the above into a horizontal tab bar.
The list is encapsulated in a <div> so that the style of the<li> and <ul> tags is local to this <div> and does not apply to the whole page.

Tabs without JavaScript

JavaScript is useful for two things:

We can omit JavaScript if the loaded page replaces the current page. It will be the case if tabs are used like menu of a website. With the construction of Tab Panel based on tags, clicking on tabs is as to click on links.

All pages display the same menu of tabs with a very small difference in the presentation of each page, the tab that corresponds to the active page is highlighted by the assignment of the "selected" class that has a descriptor in the stylesheet :

<li> <a href="#" rel="url1" class="selected"> Heading 1 </ a> </ li>

An example is given in the demo with the No Script tab. The page corresponding to this tab provides more details.

Loading pages in iframe

Two JavaScript functions are sufficient.

To each tab is assigned an onclick event which passes to the loading function the source of the call.

<li><a href="#" rel="tab-dom.html" onClick="loadit(this)">DOM</a></li> 

Loadit function: Load a page corresponding to a tab

var container = document.getElementById('container');
container.src=element.rel;

var tabs=document.getElementById('tabs').getElementsByTagName("a");
for (var i=0; i < tabs.length; i++)
{
  if(tabs[i].rel == element.rel) 
 tabs[i].className="selected";
  else
 tabs[i].className="";
}

To change the appearance of the active tab, the URL of all <a> tags are loaded into an array and we compare these URLs with the rel attribute of the selected tab.
To the choosen page is associated the "selected" class and not for others.

Function startit: Loading the default page

This function is used when the page with the Tab Panel is loaded, to fill the default tab.

function startit()
{
var tabs=document.getElementById('tabs').getElementsByTagName("a");
var container = document.getElementById('container');
container.src = tabs[0].rel;
}

window.onload=startit;

Onload is required to delay the loading after the DOM is built.

Compatibility

In Internet Explorer, the display is wrong with the transitional DocType and is correct with this DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> 

or:

<!DOCTYPE html> 

Demonstration

Second part: Tab Panel with frames.
© 2009-2012 Xul.fr