CSS Code, DHTML Code, JavaScript Code, Random Musings

Create Tabs with CSS and JavaScript

With this code you can make any of the content of your page tabbed. You can take long sections of content, and put it all into one concise tabbed interface that users can click through instead of scrolling. You can use this code as-is, all you need to do is modify the "Page" divs, and/or add more of your own.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>Tab-View</title>
<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}

div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Serif;
    font-weight: 900;
    color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
    background-color: lightyellow;
}

div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;
    overflow: hidden;
}

div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>
</head>
<body>
<form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div>
    <div class="Pages" style="width: 350px; height: 250px;">
      <div class="Page">
        <div class="Pad">
          <table>
            <tr>
              <td style="vertical-align: top;">Distributed form:&nbsp;</td>
              <td><input type="text" name="first" />
                <br />
                <small>Note: the rest of the form is at the Tab 3.</small> </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="Page">
        <div class="Pad">
          Tab2<br />
          Tab2<br />
          Tab2<br />
        </div>
      </div>
      <div class="Page">
        <div class="Pad">
          <br />
          <table>
            <tr>
              <td>Username:&nbsp;</td>
              <td><input style="width: 120px;" type="text"     name="username" /></td>
            </tr>
            <tr>
              <td>Password:&nbsp;</td>
              <td><input style="width: 120px;" type="password" name="password" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="submit" value="Submit" /></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</form>
<script type="text/javascript">
    tabview_initialize('TabView');
</script>
</body>
</html>
Share

21 Comments

  1. Nice script. I would love to use this in my pages. However, when this script is accessed in IE, the script content is blocked from executing.

    When I dug into it some more, I found IE is labeling it as activeX.

    I looked through the code and it looks like javascript to me. I dont understand why this script is marked and blocked. Are you aware of any issue like this?

  2. Are you running it on your local computer? That could cause the problem. If you upload it to a web server it should work fine

  3. Yes. That was the problem. I stuffed it on a local directory just to see if it would work in FF and IE. It wouldn't have dawned on me that running it outside of a webserver would do that.

    Thanks for the quick response. I figured I would wait for an emial or check back later. Looks like you responded in 5 minutes!

    The 2 hours wasn't wasted however. I poked around the rest of your site and found some other cool stuff.

    You are now bookmarked.

    Thanks again for the quick response.

  4. Hi. I am using a code almost identical to this on a project. I've noticed that sometimes on the postback, I lose the tabs completely, and never regain them. Some of this is a rendering issue, so I set a timeout to allow the tabs to "catch up". However, if the code behing writes a startup script with the tabview_switch…the tabs go bye bye.

    Do you have any suggestions, or seen this instance before?

    Thanks!
    Genie

  5. hello sir,

    i used this script which is such a nice script….but i have got some problem…i declare six tabs….and add pages for each tab and include a same jsp file on each pages for each tab, which have some text boxes…to take input from user…but i only get the values from the first tabs pages(jsp)….to get other pages value (from jsp) what i should have to do.

  6. Ok, cool tabs, but they don't seem to work for ebay, any thoughts on how I might fix that to get it to work. Ebay lets it run, shows the tab 1 contents, but will not switch to the other tabs….

    thanks for any help.

  7. This script works perfectly on ebay will no problems. Try the script again from scratch, it does work.

  8. will a scroll bar appear if contents of tab is long

  9. Thanks !

    Very handy piece of code, and best part is, its devoid of clunky images for tabs, and a clean cross browser look 🙂 .

  10. Thank U very much it helped me a lot in creating pages

  11. hi…m not able to create more than 3 tag?? pls help

  12. It will display more than 3 tabs. Just change the width in the css from 90 to a value less than 90.

  13. This is indeed a great script, thank you. But I was curious if anyone has figured out a way to directly link to a specific tab from within a URL? I had tried using an anchor tag, but could not figure how how to get that to work. Anyone have any ideas?

  14. Cyburdine,

    You just need to call the function when the link is clicked. Use:
    onClick="tabview_switch('TabView', 1);" – where the number denotes the tab. If you also set the link href to #TabView, then you can take the user to the tab set and select a tab for them.

  15. Very good example. Easy to understand.

    Thank you

    == Jagdeep Mankotia

  16. Hi,
    Thanks for the example. Acutlly I\'m trying to implement similar tab functionality in my project. Based on the selected value from the previous page I\'ve to highlight the corresponding tab in the current page.

    Can you pl. tell me how to do that.

    Thanks.

  17. hello

    I like this tab! however, I have a problem with Page's height. It should be set the height to work. I'd like to make each page's div resize fits to its content. but the height blocks me to do resizing div. If I not set the height, the height becomes accumulated with another page when I switch to another tab. could you help this out.

  18. hi
    your code is very applicable, when we don't want use Jquery in web content so this code is very suitable when a Jquery active in our page.
    thnx

  19. hey guys this code unable to work with me in ebay.. at least in the preview, does anyone know for sure if I continue with the listing and list it that it would work on the live listing?!

    Thanks

  20. Great, i will learn many new things from this script, and i can use some of them too. !!
    Thank YOu.

  21. hello nice example.
    how we can add more than one tab to the existing tabs.
    Please, reply me.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image