Tab panel for HTML application

CSS and JavaScript tabs for displaying alternative content in a same layer, without iframes or hyperlinks.

This technique is best suited for the interface of an application, online or offline. It allows to display one content at once, among several stored in a single page. The tabs allow to access each content. The difference with the tabs script already described is that it does not use iframes, and does not place either links in tabs.

As a bonus, these tabs come with rounded corners, thanks to two lines of CSS code.

border-top-left-radius:6px;
border-top-right-radius:6px;

The application example of the script displays either an SVG image, or the source code of this image.

The tabs are made of <li> tags. The display:inline attribute removes chips at the same time it places the elements on the same line.

HTML code:

<div id="tabs">
    <ul>
        <li onClick="selView(1, this)">SVG Image</li>
        <li onClick="selView(2, this)">Source code</li>
    </ul>
</div>

<div id="tabcontent">
  <div id="svgpic" class="tabpanel" style="display:inline">
  <div id="source" class="tabpanel" style="display:none">
</div>

CSS code:

#tabs ul li 
{
    display:inline-block;
    float:left;
    height:24px;
    min-width:80px;
    text-align:center;
    line-height: 22px;
    padding:0 8px 0 8px;
    margin: 1px 0px 0px 0px;
    border: 1px solid gray;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;	
    background:#F0F0F0;
}

Below the tabs is placed a container whose ID is tabcontent, which contains several panels whose class is tabpanel. The container has the attribute position: relative and panels attribute position: absolute. They are all placed in position 0 in the container, and thanks to the display property, only one is displayed at a time.

It remains to select a panel. It is the role of the selView() function associated with the onclick event for each tab.

function selView(n, litag) {
  var svgview = "none";
  var codeview = "none";
  switch(n) {
    case 1:
      svgview = "inline";
      break;
    case 2:
      codeview = "inline";
      break;
      // add how many cases you need
    default:
      break;
  }

  document.getElementById("svgpic").style.display = svgview;
  document.getElementById("source").style.display = codeview;
  var tabs = document.getElementById("tabs");
  var ca = Array.prototype.slice.call(tabs.querySelectorAll("li"));
  ca.map(function(elem) {
    elem.style.background="#F0F0F0";
    elem.style.borderBottom="1px solid gray"
  });

  litag.style.borderBottom = "1px solid white";
  litag.style.background = "white";
}

The code assigns the "none" value by default to display, except for the active tab which is set to "inline". Also for presentation options, all tabs have a gray background and a bottom edge, except the active tab that is white and connected to the content.

It is also required that the first tab is activated at start, which is done by calling the selInit() function:

function selInit() {
  var tabs = document.getElementById("tabs");
  var litag = tabs.querySelector("li");   // first li
  litag.style.borderBottom = "1px solid white";
  litag.style.background = "white";
}

This code works with IE and all other modern browsers.

Download the demo with the full JavaScript and CSS code.