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 file is tab.js and contains this:
// 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:
<div id="prod_column" style="margin-top:15px;">
<div class="left"></div>
<ul id="tab_product" onmouseover="tab();">
<li class="sel">Fun</li>
<li>Forum</li>
<li>Bible</li>
<li>Tools</li>
<li>?</li>
</ul>
</div>
<div id="part_1" class="show">
<table style="width: 100%; height: 100%;">
<tr>
<td class="ajax3" style="height: 50px;">
<if condition="in_array($bbuserinfo['usergroupid'], array(2,6,7,35))">
<a href="http://www.talkjesus.com/misc.php?do=page&template=Chat">
<img src="../images/ajax/chat.gif" alt="Live Chat" class="ajax2" /></a><br />
<div class="smallfont">
<a href="http://www.talkjesus.com/misc.php?do=page&template=Chat">Chat</a></div>
<else />
<img src="../images/ajax/chat.gif" alt="Live Chat" class="ajax2" /><br />
<div class="smallfont">
Chat: Members Only</div>
</if></td>
<td class="ajax5" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/journal.php">
<img alt="Journal" src="../images/ajax/journal.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/journal.php">Journal</a></div></td>
</tr>
<tr>
<td class="ajax6" style="height: 50px;">
<a href="http://www.talkjesus.com/gallery/index.php">
<img alt="Photo Gallery" src="../images/ajax/photos.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/gallery/index.php">Gallery</a></div></td>
<td class="ajax1" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/arcade.php">
<img alt="Arcade" src="../images/ajax/arcade.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/arcade.php">Arcade</a></div></td>
</tr>
</table>
</div>
<div id="part_2" class="hide">
<table style="width: 100%; height: 100%;">
<tr>
<td class="ajax3" style="height: 50px;">
<a href="http://www.talkjesus.com/blog/">
<img src="../images/ajax/blog.gif" alt="Forum Blog" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/blog/">Blog</a></div></td>
<td class="ajax5" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/calendar.php">
<img src="../images/ajax/events.gif" alt="Events" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/calendar.php">Events</a></div></td>
</tr>
<tr>
<td class="ajax6" style="height: 50px;">
<a href="http://www.talkjesus.com/misc.php?do=page&template=Donate">
<img alt="Donate" src="../images/ajax/news.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/misc.php?do=page&template=Donate">Donate</a></div></td>
<td class="ajax1" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/groups/">
<img alt="Social Groups" src="../images/ajax/time.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/groups/">Groups</a></div></td>
</tr>
</table>
</div>
<div id="part_3" class="hide">
<table style="width: 100%; height: 100%;">
<tr>
<td class="ajax3" style="height: 50px;">
<a href="http://www.talkjesus.com/misc.php?do=page&template=Bible">
<img src="../images/ajax/bible.gif" alt="Glossary" class="ajax2" /></a><br />
<div class="smallfont">
<a href="http://www.talkjesus.com/misc.php?do=page&template=Bible">
Bible</a></div></td>
<td class="ajax5" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/bible-glossary/">
<img src="../images/ajax/glossary.gif" alt="Glossary" class="ajax2" /></a><div class="smallfont"><a href="http://www.talkjesus.com/bible-glossary/">Glossary</a></div></td>
</tr>
<tr>
<td class="ajax6" style="height: 50px;">
<a href="http://www.talkjesus.com/misc.php?do=page&template=yellowpages">
<img alt="Random Quotes" src="../images/ajax/quotes.gif" class="ajax2" /></a><div class="smallfont"><a href="http://www.talkjesus.com/misc.php?do=page&template=yellowpages">Yellow Pages</a></div></td>
<td class="ajax1" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/bible-glossary/maps-4/">
<img alt="Random Quotes" src="../images/ajax/map.gif" class="ajax2" /></a><div class="smallfont">
<a href="http://www.talkjesus.com/bible-glossary/maps-4/">Maps</a></div></td>
</tr>
</table>
</div>
<div id="part_4" class="hide">
<script type="text/javascript">
<!--
function openRadioAndTV(){
radioAndTVWindow = window.open('radioandtv.php', 'radioandtv', 'directories=no,height=500,width=700,location=no,menubar=no,resizable=yes,status=no,scrollbars=yes,toolbar=no');
}
//-->
</script>
<table style="width: 100%; height: 100%;">
<tr>
<td class="ajax3" style="height: 50px;">
<a href="http://www.talkjesus.com/members/list/">
<img src="../images/ajax/member.gif" alt="Member List" class="ajax2" /></a><div class="smallfont">
<a href="http://www.talkjesus.com/worldmap.php">Members</a></div></td>
<td class="ajax5" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/vaispy.php">
<img src="../images/ajax/ispy.gif" alt="iSpy" class="ajax2" /></a><div class="smallfont"><a href="http://www.talkjesus.com/vaispy.php">iSpy</a></div></td>
</tr>
<tr>
<td class="ajax6" style="height: 50px;">
<a href="javascript:openRadioAndTV()">
<img alt="Random Quotes" src="../images/ajax/radio.gif" class="ajax2" /></a><div class="smallfont">
<a href="javascript:openRadioAndTV()">Multimedia</a></div></td>
<td class="ajax1" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/tags/">
<img alt="Tag Clouds" src="../images/ajax/tags.gif" class="ajax2" /></a><div class="smallfont"><a href="http://www.talkjesus.com/tags/">Tags</a></div></td>
</tr>
</table>
</div>
<div id="part_5" class="hide">
<table style="width: 100%; height: 100%;">
<tr>
<td class="ajax3" style="height: 50px;">
<a href="http://www.talkjesus.com/faq.php">
<img src="../images/ajax/faq.gif" alt="FAQ" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/faq.php">FAQ</a></div></td>
<td class="ajax5" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/forum-rules-ten-commandments/53-talk-jesus-10-commandments-rule.html">
<img src="../images/ajax/rules.gif" alt="Forum Rules" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/forum-rules-ten-commandments/53-talk-jesus-10-commandments-rule.html">Rules</a></div></td>
</tr>
<tr>
<td class="ajax6" style="height: 50px;">
<a href="http://www.talkjesus.com/press-stand/12096-forum-etiquette.html">
<img alt="Forum Etiquette" src="../images/ajax/etiquette.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/press-stand/12096-forum-etiquette.html">Etiquette</a></div></td>
<td class="ajax1" style="height: 50px; width: 617px;">
<a href="http://www.talkjesus.com/press-stand/3028-statement-faith.html">
<img alt="Statement of Faith" src="../images/ajax/statement.gif" class="ajax2" /></a><br />
<div class="smallfont"><a href="http://www.talkjesus.com/press-stand/3028-statement-faith.html">Statement</a></div></td>
</tr>
</table>
</div>The first two tabs work, but 3-5 do not.
Your help is appreciated. Thanks.
