View Full Version : Tab active in menu

Oct 2nd, 2011, 11:32 PM
Hi everyone! I'm making a tab menu with HTML, CSS and JavaScript.

I have this HTML:

<ul class="tabmenu">
<li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Informaci&oacute;n</a></li>
<li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li>
<li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li>
<li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">C&oacute;mo llegar</a></li>

Then I added some CSS to it (if you need to see it please tell).
And the JavaScript:

<script type="text/javascript">
function tbs(id){
return document.getElementById(id);

function tabsen(){
tbs("1").style.display = "none";
tbs("2").style.display = "";
tbs("3").style.display = "";
tbs("4").style.display = "";

function tabs(id) {
var e = tbs(id);
e.style.display = ( e.style.display == '' ) ? 'block' : '' ;

function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'active';
prevLink = ele.id;

The problem is: I don't know how to set active the first tab. I've tried with class='active', but when I use that atribute and click on another tab, the first one doesn't deactivate...

Can anybody help me?

Oct 3rd, 2011, 12:26 AM
rather then defining var prevLink = "";, initialize it with the first tab object id.

something like - var prevLink= "1";

Thanks & Regards,
Niral Soni

Oct 3rd, 2011, 12:34 AM
I've tried this, but didn't work... :S
Anything else?