Tabs in JavaScript : Tab : GUI Components : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP


JavaScript DHTML  »  GUI Components   » [  Tab  ]   
 



Tabs in JavaScript

Please note that some example is only working under IE or Firefox.


<html>
<head>

<style type="text/css">
/* tabs styles, based on http://www.alistapart.com/articles/slidingdoors */

DIV.tabs
{
   float            : left;
   width            : 100%;
   background       : url("tab_b.gif"repeat-x bottom;
   margin-bottom    : 4px;
}

DIV.tabs UL
{
   margin           : 0px;
   padding-left     : 10px;
   list-style       : none;
}

DIV.tabs LI, DIV.tabs FORM
{
   display          : inline;
   margin           : 0px;
   padding          : 0px;
}

DIV.tabs FORM
{
   float            : right;
}

DIV.tabs A
{
   float            : left;
   background       : url("tab_r.gif"no-repeat right top;
   border-bottom    : 1px solid #84B0C7;
   font-size        : x-small;
   font-weight      : bold;
   text-decoration  : none;
}

DIV.tabs A:hover
{
   background-position: 100% -150px;
}

DIV.tabs A:link, DIV.tabs A:visited,
DIV.tabs A:active, DIV.tabs A:hover
{
       color: #1A419D;
}

DIV.tabs SPAN
{
   float            : left;
   display          : block;
   background       : url("tab_l.gif"no-repeat left top;
   padding          : 5px 9px;
   white-space      : nowrap;
}

DIV.tabs INPUT
{
   float            : right;
   display          : inline;
   font-size        : 1em;
}

DIV.tabs TD
{
   font-size        : x-small;
   font-weight      : bold;
   text-decoration  : none;
}



/* Commented Backslash Hack hides rule from IE5-Mac \*/
DIV.tabs SPAN {float : none;}
/* End IE5-Mac hack */

DIV.tabs A:hover SPAN
{
   background-position: 0% -150px;
}

DIV.tabs LI#current A
{
   background-position: 100% -150px;
   border-width     : 0px;
}

DIV.tabs LI#current SPAN
{
   background-position: 0% -150px;
   padding-bottom   : 6px;
}

DIV.nav
{
   background       : none;
   border           : none;
   border-bottom    : 1px solid #84B0C7;
}

</style>
</head><body>
<div class="tabs">
  <ul>
    <li><a href=""><span>Main&nbsp;Page</span></a></li>
    <li id="current"><a href=""><span>Classes</span></a></li>
    <li><a href=""><span>Directories</span></a></li>
  </ul></div>
<div class="tabs">
  <ul>
    <li id="current"><a href=""><span>Class&nbsp;List</span></a></li>
    <li><a href=""><span>Class&nbsp;Members</span></a></li>
  </ul>
</div>
</body>
</html>

           
       
Download: tabs.zip   ( 4  K )  
Related examples in the same category
1.  Tab Manager 1Has Download File
2.  Tab Manager 2Has Download File
3.  Tab control for a gameHas Download File
4.  Tab with control insideHas Download File
5.  Slide tab
6.  Tab control
7.  Four Tab with different style
8.  XP Tab in JavaScript
9.  Two tab in one page
10.  HTML style tab
11.  Calendar in tabHas Download File
12.  Tab in javascriptHas Download File
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.