Tabbed Page


Tabbed Page

Have you ever asked how to make a tabbed page like one shown by the picture above? If you want to know how to do that, here is a short explanation:

  1. First you need to download jquery.js?and idtabs.js. Thanks to the creator of jquery.js and idtabs.js.
  2. Inside <head> tag call? jquery.js and idtabs.js. Remember you must call jquery.js first then idtabs.js.
  3. Use <ul> and <li> tags to create the tabs.
  4. Use css style for the tabs to appear as we want.

?The complete code is here:

PLAIN TEXT
HTML:
  3. <script type="text/javascript" src="jquery.js"></script> <!-- jquery must be called first -->
  4. <script type="text/javascript" src="idtabs.js"></script>
  6. #container {
  7.     padding-top: 0px;
  8.     width: 380px;
  9.     position: relative;
  10.     border:1px solid black;
  11.     background-color:#CCCCCC;
  12. }
  13. .idTabs {
  14.     margin: 0px;
  15.     padding: 0px;
  16.     float: left;
  17.     width: 350px;
  18.     list-style-type: none;
  19. }
  20. .idTabs li {
  21.     display: inline;
  22.     margin: 0px;
  23.     padding: 0px;
  24.     float: left;
  25.     color: #000000;
  26.     text-align: center;
  27.     font-size: 11px;
  28. }
  29. .idTabs li a {
  30.     color: #FFFFFF;
  31.     text-decoration: none;
  32.     margin: 0px;
  33.     padding: 5px 8px;
  34.     background: #ffa900;
  35.     line-height: 30px;
  36.     height: 30px;
  37.     border-right: 1px solid #625F55;
  38.     display: block;
  39.     float: left;
  40. }
  41. .idTabs li a.selected {
  42.     background: #FFFFFF;
  43.     font-weight: bold;
  44.     color: #000000;
  45.     text-decoration: none;
  46.     line-height: 30px;
  47.     padding: 5px 8px;
  48.     height: 30px;
  49.     border-right: 1px solid #CCCCCC;
  50.     display: block;
  51.     float: left;
  52. }
  53. #recententries {
  54.     float: left;
  55.     width: 350px;
  56.     background: #FFFFFF;
  57.     padding: 10px;
  58.     display: block;
  59. }
  60. #recentcomments {
  61.     float: left;
  62.     width: 350px;
  63.     background: #FFFFFF;
  64.     padding: 10px;
  65.     display: none;
  66. }
  67. #mostcomments {
  68.     float: left;
  69.     width: 350px;
  70.     background: #FFFFFF;
  71.     padding: 10px;
  72.     display: none;
  73. }
  74.  
  75. </style>
  76. </head>
  78. <div id="container">
  79. <ul class="idTabs">
  80. <li><a href="#recententries">Recent Entries</a></li>
  81. <li><a href="#recentcomments">Recent Comment</a></li>
  82. <li><a href="#mostcomments">Most Comment</a></li>
  83. </ul>
  84. <div id="recententries">
  85. Recent Entries
  86. </div>
  87.  
  88. <div id="recentcomments">
  89. Recent Comment
  90. </div>
  91.  
  92. <div id="mostcomments">
  93. Most Comment
  94. </div>
  95. </div>
  96. </body>
  97. </html>

More info about javascript tabbed page 


Be First To Comment

Related Post

Leave Your Comments Below

Please Note: All comments will be hand modified by our authors so any over offensive comments will be removed and your submitted comments will be appreared after approved

« Text with Motion Trail
Fireworks Horizontal Line Effect »
  • samir patel in Merge Table Cells Using Javascript
  • ankara hali y?k… in Call to Undefined Function curl_ini…
  • SuperJet in Remove Mybrowserbar From My Browser…
  • The Love in Remove Mybrowserbar From My Browser…
  • ???? in Remove Mybrowserbar From My Browser…
  • satyajeet in Merge Table Cells Using Javascript
  • How come PR alw… in Remove Acronym or Abbr Underline In…
  • Shermie in Get The Last Record from a Table
  • martin in Getting The Domain Name Out Of A UR…
  • rbc303 in Fireworks: Make Rounded Corner Edge…

Categories

Archives