<style type="text/css">
    ul#tabList {
         list-style-type: none;
         margin: 0 15px 0 15px;
         padding: 0 0 2px 0; }
    ul#tabList li {
         display: inline; }
    ul#tabList li a {
         background: #cfe7fa;
         border: 1px solid #9ac1c9;
         padding: 7px 10px 7px 10px;
         text-decoration: none;
         font:italic normal bold 12px/140% Helvetica,Arial, sans-serif;
         color:#666666; }
    ul#tabList li a:hover {
         background: #6393c1;}
    ul#tabList li a.selected {
         background: #f6e6b4;
         padding: 7px 10px 7px 10px;
         font:italic normal bold 12px/140% Helvetica,Arial, sans-serif;
         color:#666666;}
    div.tabContent {
         border: 1px solid #9ac1c9;
         padding: 15px;
         background-color: #f1f0ee; }
    div.tabContent.hide {
         display: none; }
</style>

<script type="text/javascript">
    var tabLinks = new Array();
    var contentDivs = new Array();

    function tabInit() {
      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabList').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;
      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    window.onload = tabInit;
</script>

<ul id="tabList">
    <li>
        <a href="#Tab1">Tab1</a>
    </li>

    <li>
        <a href="#Tab2">Tab2</a>
    </li>

    <li>
        <a href="#Tab3">Tab3</a>
    </li>

    <li>
        <a href="#Tab4">Tab4</a>
    </li>
</ul>

<div class="tabContent" id="Tab1">
    <h2>
        Tab1
    </h2>

    <div>
        <p>
            Tab1 Content
        </p>
    </div>
</div>

<div class="tabContent" id="Tab2">
    <h2>
        Tab2
    </h2>

    <div>
        <p>
            Tab2 Content
        </p>
    </div>
</div>
<div class="tabContent" id="Tab3">
    <h2>
        Tab3
    </h2>

    <div>
        <p>
            Tab3 Content
        </p>
    </div>
</div>
<div class="tabContent" id="Tab4">
    <h2>
        Tab4
    </h2>

    <div>
        <p>
            Tab4 Content
        </p>
    </div>
</div>