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&amp;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&amp;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.

you are missing some code in your javascript.
for example i just added the following extra code to yours to get tab 3 working.

labels[2].onclick=function(){
				this.className="sel";
				labels[0].className="";
				part_1.className="hide";
				part_2.className="hide";
				part_3.className="hide";
				part_4.className="show";
				part_5.className="show";		
				}

also jquery may be a big help to you, it has tab handling built in (or perhaps a plugin)

Thank you, that worked.

Learned a little more about javascripting now :)

Actually, small problem.

When I click the 3rd tab, the 2nd tab remains highlighted (blue).

This is the current code

// 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";		
		}
	labels[2].onclick=function(){
		this.className="sel";
		labels[0].className="";
		part_1.className="hide";
		part_2.className="hide";
		part_3.className="hide";
		part_4.className="show";
		part_5.className="show";		
		}
}
This article has been dead for over six months. Start a new discussion instead.