Wednesday, October 20, 2010

Tabs with simple Javascript

Making tabs with css is very simple and also getting the information after clicking that tab is simple, but the problem arrives when the styling of that tab should clearly state that the tab is the current tab.
I was not able to get that with css.
So I tried to find the solution but then decided to make my own code as it was a static site and I was not going to add those on the fly in the program.

I just wanted 3 tabs which will never change.
So

In view

--Head section

<script src="prototype.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>

--Body section

<div>
<div>
<a href="#" id="first_tab" onclick="firsttab();" class="tabs"/> First Tab </a>
<a href="#" id="second_tab" onclick="secondtab();" class="tabs"/> Second Tab</a>
<a href="#" id="third_tab" onclick="thirdtab();" class="tabs"/> Third Tab </a>
</div>

<div id="container" >
<div id="first_tab_div"> some text for first div </div>
<div id="second_tab_div"> some demo text for second div </div>
<div id="third_tab_div"> some text for third div </div>
</div>
</div>

In tabs.js

function enquiry(){
 $('first_tab_div').show(); 
 $('second_tab_div').hide(); 
 $('third_tab_div').hide(); 
 $('first_tab').style.backgroundColor='#E3E3D9'; 
 $('second_tab').style.backgroundColor='#FFFFF4'; 
 $('third_tab').style.backgroundColor='#FFFFF4'; 
}
function meeting(){
 $('second_tab_div').show(); 
 $('first_tab_div').hide(); 
 $('third_tab_div').hide(); 
 $('second_tab').style.backgroundColor='#E3E3D9'; 
 $('first_tab').style.backgroundColor='#FFFFF4'; 
 $('third_tab').style.backgroundColor='#FFFFF4'; 
}
function advertisement(){
 $('third_tab_div').show(); 
 $('first_tab_div').hide(); 
 $('second_tab_div').hide();
 $('third_tab').style.backgroundColor='#E3E3D9'; 
 $('first_tab').style.backgroundColor='#FFFFF4'; 
 $('second_tab').style.backgroundColor='#FFFFF4'; 
}

In CSS

a#first_tab, a#second_tab, a#third_tab,
a#first_tab:visited, a#second_tab:visited, a#third_tab:visited{color:#000; 
padding:8px; 
height:25px; 
line-height:25px; }
a#second_tab, a#third_tab, a#second_tab:visited, a#third_tab:visited{background:#fffff4}
a#first_tab, a#first_tab:visited, a#first_tab:hover, a#second_tab:hover, a#third_tab:hover{background:#E3E3D}
#container{background:#E3E3D; margin:0}

That's It. The simple and really quick tabs are ready to use.
But this code is only useful when we are not suppose to add any tabs and you want to add heavy tabs creators javascript files.
This code is not useful when the program is going to create any. For that there are many sources available::

webdesignbooth Or wittysparks...

No comments:

Post a Comment