Simplest Tab Panel in CSS

A tab panel may be achieved with just CSS and 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. Each tab is built around a tag link, so clicking on a tab will be like to click on a link.

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

Both cases will be shown in the demonstrations.

CSS code

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

The layout of the tab panel is as follow:

<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 with no 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 a menu for a website. With the tabpanel built on tags, clicking on a tab is as to click on a link to load another page and replace the current one.

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 with 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 provides more details.

Loading pages in iframe

Two JavaScript functions are needed.

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 put into an array and we compare each ot them in turn against the rel attribute of the selected tab.
To the choosen page is associated the "selected" class, no class is associated to others.

startit function: Loading the default page

This function is called when the page is loaded, it fills an array with the URL of each tab of the tabpanel and assigns the URL of the current page to the rel attribute of the object whose ID is "container".

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.

Third part: Tab Panel for HTML application.

© 2009-2015 Xul.fr