troubleshooting Question

HTML Tab Css

Avatar of mkarthik415
mkarthik415 asked on
4 Comments1 Solution760 ViewsLast Modified:

I am developing html tab control. Can any one please provide css for the below code so that the tab header will have tab look and feel when selected. I want the tab headers to be in horizontal alignment. Below I am attaching html and javascript code. I need the output to display some thing like 2.gif

Thank You
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
    <script language="JavaScript1.3">
var panes = new Array();

function setupPanes(containerId, defaultTabId) {
// go through the DOM, find each tab-container
// set up the panes array with named panes
// find the max height, set tab-panes to that height
panes[containerId] = new Array();
var maxHeight = 0; var maxWidth = 0;
var container = document.getElementById(containerId);
var paneContainer = container.getElementsByTagName("div")[0];
var paneList = paneContainer.childNodes;
for (var i=0; i < paneList.length; i++ ) {
var pane = paneList[i];
if (pane.nodeType != 1) continue;
if (pane.offsetHeight > maxHeight) maxHeight = pane.offsetHeight;
if (pane.offsetWidth > maxWidth ) maxWidth = pane.offsetWidth;
panes[containerId][] = pane; = "none";
} = maxHeight + "px"; = maxWidth + "px";

function showPane(paneId, activeTab) {
// make tab active class
// hide other panes (siblings)
// make pane visible

for (var con in panes) {
activeTab.className = "tab-active";
if (panes[con][paneId] != null) { // tab and pane are members of this container
var pane = document.getElementById(paneId); = "block";
var container = document.getElementById(con);
var tabs = container.getElementsByTagName("ul")[0];
var tabList = tabs.getElementsByTagName("a")
for (var i=0; i<tabList.length; i++ ) {
var tab = tabList[i];
if (tab != activeTab) tab.className = "tab-disabled";
for (var i in panes[con]) {
var pane = panes[con][i];
if (pane == undefined) continue;
if ( == paneId) continue; = "none"
return false;

    <body onload='setupPanes("container1", "tab1");'>

<div class="tab-container" id="container1">
  <ul class="tabs">
    <li><a href="#" onClick="return showPane('pane1', this)" id="tab1">Tab 1</a></li>
    <li><a href="#" onClick="return showPane('pane2', this)">Tab 2</a></li>
    <li><a href="#" onClick="return showPane('pane3', this)">Tab 3</a></li>

  <div class="tab-panes">  
    <div id="pane1">
      Pane 1 Content
    <div id="pane2">
      Pane 2 Content
    <div id="pane3">
      Pan 3 Content

Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros