PDA

View Full Version : Ajax Tabs, half working



Chadi
04-21-2009, 12:19 AM
I'm trying to figure out why some of the ajax tabs are not working. The first two tabs work, the third through 5th tabs do not work when you click on them.

The js contains:


// JavaScript Document
function tab(){
var labels=document.getElementById("tab_product").getElementsByTagName("li");
var part_1=document.getElementById("part_1");
var part_2=document.getElementById("part_2");
var part_3=document.getElementById("part_3");
var part_4=document.getElementById("part_4");
var part_5=document.getElementById("part_5");
labels[0].onclick=function(){
this.className="sel";
labels[1].className="";
part_1.className="show";
part_2.className="hide";
part_3.className="hide";
part_4.className="hide";
part_5.className="hide";
}
labels[1].onclick=function(){
this.className="sel";
labels[0].className="";
part_1.className="hide";
part_2.className="show";
part_3.className="show";
part_4.className="show";
part_5.className="show";
}
}

The css contains:


/*===product column start*/
#prod_column {height:36px;margin-bottom:6px;background:url(images/prod_column_bg.png) repeat-x top;margin:8px 0;}
#prod_column .left,#prod_column .right {float:left;width:5px;height:31px;background:url(images/prod_column_side.png) no-repeat left top;}
#prod_column .right{float:right;background-position:0 -34px;}
#prod_column ul li {float:left;}
#prod_column ul li a {display:block;width:138px;height:27px;margin:4px 1px 0 1px;background:url(images/prod_column.png) no-repeat;font-size:12px;line-height:26px;text-align:center; cursor:pointer;}
#prod_column ul li a.sel {display:block;width:138px;height:32px;background:url(images/prod_column.png) no-repeat 0 -30px;color:#fff;}
#prod_column ul#tab_product li{display:block;width:138px;height:27px;margin:4px 1px 0 1px;background:url(images/prod_column.png) no-repeat;font-size:12px;line-height:26px;text-align:center; cursor:pointer;}
#prod_column ul#tab_product li.sel {display:block;width:138px;height:32px;background:url(images/prod_column.png) no-repeat 0 -30px;color:#fff;}

/*===tab start===*/
#tab li,#tab_buy li {float:left; cursor:pointer;}
#tab li,#tab_buy li{display:block;width:231px;height:27px;margin-right:1px;background:url(images/prod_single_column.png) no-repeat;line-height:24px;text-align:center;font-size:12px;}
#tab li.margin,#tab_buy li.margin {margin-right:0;}
#tab li.sel {height:32px;background-position:0 -33px;color:#FFF;}
#tab_buy li.sel {height:32px;background-position:0 -108px;color:#FFF;}
#tab_buy li {width:347px;background-position:0 -73px;}
.show {display:block;}
.hide {display:none;}

The body contains:

http://tinypaste.com/10292

Your help is appreciated. Thanks.