ARRRGH!

[Leonardo]

I have the following html. Each <td> has a class. onmouseover i'm
changing said class and I'm wondering if javascript can change the
class onclick, so that it stays a different color, and changes all the
other <td> classes so they're uncolored. Basically, i'm trying to turn
a tab a color when it is clicked, and change the other tabs back to
normal (in case another one has already been clicked).

Does this even make sense? I need a guru's help on this one!

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">WELCOME</td>

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">NOW HIRING</td>

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">OUR TEAM</td>

 

[Leonardo]

I'm willing to PAY for a response that works!

 

[Grant Wagner]

I have the following html. Each <td> has a class. onmouseover i'm
changing said class and I'm wondering if javascript can change the
class onclick, so that it stays a different color, and changes all the
other <td> classes so they're uncolored. Basically, i'm trying to turn
a tab a color when it is clicked, and change the other tabs back to
normal (in case another one has already been clicked).

Does this even make sense? I need a guru's help on this one!

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">WELCOME</td>

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">NOW HIRING</td>

<td class=table_tab onmouseover="this.className='table_tab_over'"
onmouseout="this.className='table_tab'">OUR TEAM</td>

<style type="text/css">
td.tab_over { background-color: Blue; }
td.tab { background-color: White; }
</style>
<script type="text/javascript">
var selectTab = function()
{
return false;
}
function findParentNode(node, name)
{
if (!node)
{
return null;
}

if (node.nodeName.toLowerCase() != name.toLowerCase())
{
node = findParentNode(node.parentNode, name);
}

return node;
}
</script>
<table id="myTabs">
<tr>
<td class="tab" onclick="selectTab(this);">WELCOME</td>
<td class="tab" onclick="selectTab(this);">NOW HIRING</td>
<td class="tab" onclick="selectTab(this);">OUR TEAM</td>
</tr>
</table>
<script type="text/javascript">
var table;
if (document.getElementById &&
(table = document.getElementById('myTabs')) &&
table.getElementsByTagName)
{
selectTab = function(cell)
{
var table = findParentNode(cell, 'table');

if (table)
{
var cells = table.getElementsByTagName('td');

var ii = cells.length;
while (ii-- > 0)
{
if (cells[ii] != cell)
{
cells[ii].className = 'tab';
}
else
{
cells[ii].className = 'tab_over';
}
}
}
}
}
</script>

A lot of the complexity of the code is simply there to determine whether
the table supports getElementByTagName(). If it does, then the function
that actually does the work gets assigned to -selectTab-.
Otherwise -selectTab- remains a "do nothing" function, thereby avoiding
having to test whether the table supports getElementsByTagName()
everytime the function is invoked and any possible errors that might
occur if the -onclick- event fires but -selectTab- weren't yet defined.