Acheving TAB based display.

Posted on 2005-04-27
Last Modified: 2010-04-09
Hi guys,

         Here is the requirement,  i have information coming from database to jsp, which i have to display on different tabbed panels.  I dont need tabs to navigate to another page, but need three tabs with information in them, but only when a particular tab is clicked will the information related to that tab be displayed on screen.

        Can anyone help me with this !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  

        Using DIV tags, with ILAYER tags, etc., will help... someone told me but i dont know exactly how to use them...  If you can show me three tabs with static data in them, i can convert that to use the data that i am getting from database.

Thank You,
Question by:letsbedecent
    LVL 13

    Expert Comment

    LVL 13

    Expert Comment

    Ah, yes, and ILAYER no longer exists. Don't use it. I assume that was just an example.
    LVL 30

    Accepted Solution

    Stormy, that example uses iframes.
    What (s)he wants is to have all the data in one page -> using javascript is probably the best.
    So, here is my code example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <title>Javascript Tabbed Layout</title>
    <script type="text/javascript">

    var numberOfTabs = 3;
    var currentTab   = null;
    var currentLink  = null;

    function tab_show(tabidx) {

      if (currentTab != null) {
        currentTab.className  = "HiddenTabDiv";
        currentLink.className = "";
      currentTab  = document.getElementById("tab" + tabidx);
      currentLink = document.getElementById("link" + tabidx);
      currentTab.className  = "VisibleTabDiv";
      currentLink.className = "Selected";


    function tab_init() {

      for (var tabidx = 1; tabidx <= numberOfTabs; tabidx++) {
        curr = document.getElementById("tab" + tabidx);
        curr.className = "HiddenTabDiv";

      // default selection = 1
      var selected = 1;

      // get the selection from the url search (basic implementation)
      var search =;
      if (search.length == 2) {
        search = search.substring(1,2);
        if (0 < search && search <= numberOfTabs) {
          selected = search;


    <style type="text/css">

    body {
      background: black;
      color: beige;

    div.TabNav {
      height: 1px;

    div.TabNav ul {
      margin: 0;
      padding: 0;
      list-style: none;

    div.TabNav ul li {
      float: left;

    div.TabNav ul li a {
      display: block;
      padding: 0 1em;
      margin-right: .3em;
      color: lightblue;
      background-color: dimgray;
      border: 1px solid lightblue;
      border-bottom: none;
      text-decoration: none;

    div.TabNav ul li a:hover {
      color: white;
      background-color: gray;

    div.TabNav ul li a.Selected,
    div.TabNav ul li a.Selected:hover {
      color: dimgray;
      background-color: lightblue;

    div.HiddenTabDiv {
      display: none;

    div.VisibleTabDiv {
      color: black;
      background-color: lightblue;
      clear: left;
      display: block;
      border: 1px solid lightblue;
      padding: 1em;

    <body onload='tab_init();'>

      <div class="TabNav">
          <li><a id="link1" href="javascript: tab_show(1)">First</a></li>
          <li><a id="link2" href="javascript: tab_show(2)">Second</a></li>
          <li><a id="link3" href="javascript: tab_show(3)">Third</a></li>

      <div class="VisibleTabDiv" id="tab1">
        Tab 1

      <div class="VisibleTabDiv" id="tab2">
        Tab 2

      <div class="VisibleTabDiv" id="tab3">
        Tab 3

    LVL 13

    Expert Comment

    I'm sorry, I missed that part.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now