Home » Web Development » DHTML » View Tutorial

DHTML Tutorial: CSS Tabs/DHTML Tabs to display content beautifully in a limited space

jawahar

12/3/2008 9:29:17 PM, Views: 2718

W3Optimizer Online SEO. Top Search Engine Rankings

CSS Tabs are a great way to display multiple category content in a small space. These css tabbed displays(implemented without ajax) pre-loads the content when the web page actually gets loaded and is hidden until the user clicks the relevant javascript tab.When the user clicks the required css tab, the javascript function gets triggered and the current content is hidden and the new relevant content is shown in the display panel.

These HTML tabs are attractive, fast and dispays content instantly as the contents are already loaded in the webpage. Unlike many other html tabs which are implemented with tables, these are purely css tabs so you dont have to worry about the page load time.

The code below is an example of a good dhtml tab that is used here in expertsforge.com and I thought of sharing it to my readers. The code is commented wherever required. Just copy and paste the below content as a .html page and execute it in the browser.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
         <title>DHTML Tab,JavaScript Tab</title>
    <style type="text/css">
         #tabs {display: block;float: left;width: 160px;}
         .panel {border: solid 1px #D8D8D8;border-top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
         .tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid #645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
         .tab{font-family:tahoma; FONT-SIZE: 11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom: 1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
         .tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
    </style>
    <script language="JavaScript" type="text/javascript">
    var panels = new Array('panel1', 'panel2'); // IDs of the content panels must be put here
    var tabs = new Array('tab1', 'tab2'); // IDs of the tabs must be put here
    function displayPanel(nval)
    {
         for(i = 0; i < panels.length; i++)
         {
             document.getElementById(panels[i]).style.display = (nval-1 == i) ? 'block':'none';
             document.getElementById(tabs[i]).className=(nval-1 == i) ? 'tab_sel':'tab';
         }
    }
    </script>
    </head>
    <body>
         <div id="tabs">
             <div id="tab1" class="tab_sel" align="center" onClick="javascript: displayPanel('1');">Tab 1</div>
             <div id="tab2" class="tab" style="margin-left:1px;" align="center" onClick="javascript: displayPanel('2');">Tab 2</div>
         </div>
    <div class="tab_bdr"></div> 
         <div class="panel" id="panel1" style="display: block">1</div> 
         <div class="panel" id="panel2" style="display: none">2</div>
    </body>
</html>