Sep
21
2008
Static Tab PDF Print E-mail

HariesDesign.com This call static tabs with CSS. like shown in this picture

tab static

 

Demo 

 

 Step 1

Create directory , name it with js 

place this file to js directory:

  1. addclasskillclass.js
  2. attachevent.js 
  3. addcss.js  
  4. tabtastic.js  
  5. tabtastic.css  
  6. docs.css  
 

Place this between <HEAD> </HEAD>

 
/* www.hariesdesign.com  */
<script type="text/javascript" src="js/addclasskillclass.js"></script>
<script type="text/javascript" src="js/attachevent.js"></script>
<script type="text/javascript" src="js/addcss.js"></script>
<script type="text/javascript" src="js/tabtastic.js"></script>
<link type="text/css" media="all" href="js/tabtastic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="js/docs.css">

 

 Place this between <BODY> </BODY>

 
<div id="pagecontent">

<ul class="tabset_tabs">
<li class="firstchild"><a href="#Tab1" class="preActive active">Tab 1</a></li>
<li><a class="preActive postActive" href="#Tab2">Tab 2</a></li>
<li><a class="preActive" href="#Tab3">Tab 3</a></li>
<li><a class="" href="#Tab4">Tab 4</a></li>
</ul>


<div id="Tab1" class="tabset_content tabset_content_active">
<h2 class="tabset_label">Tab 1</h2>
<p>Content Tab 1</p>
</div>


<div id="Tab2" class="tabset_content">
<h2 class="tabset_label">Tab 2</h2>
<p>Content Tab 2</p>
</div>

<div id="Tab3" class="tabset_content">
<h2 class="tabset_label">Tab 3</h2>
<p>Content Tab 3</p>
</div>



<div id="Tab4" class="tabset_content">
<h2 class="tabset_label">Tab 4</h2>
<p>Content Tab 4</p>
</div>


</div>

 

 
< Prev   Next >

Gallery Photography

Login