ARRRGH!

**Leonardo** · Jul 23 '05, 04:34 PM

Re: ARRRGH!

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

Leonardo wrote:[color=blue]
> 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[/color]
the[color=blue]
> other <td> classes so they're uncolored. Basically, i'm trying to[/color]
turn[color=blue]
> 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="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">WELCO ME</td>
>
> <td class=table_tab onmouseover="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">NOW HIRING</td>
>
> <td class=table_tab onmouseover="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">OUR TEAM</td>[/color]

**Grant Wagner** · Jul 23 '05, 04:34 PM

Re: ARRRGH!

"Leonardo" <leonardo@assoc iatedcontent.co m> wrote in message
news:1105638542 .639687.109400@ z14g2000cwz.goo glegroups.com.. .[color=blue]
>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="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">WELCO ME</td>
>
> <td class=table_tab onmouseover="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">NOW HIRING</td>
>
> <td class=table_tab onmouseover="th is.className='t able_tab_over'"
> onmouseout="thi s.className='ta ble_tab'">OUR TEAM</td>[/color]

<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.toLowerCas e())
{
node = findParentNode( node.parentNode , name);
}

return node;
}
</script>
<table id="myTabs">
<tr>
<td class="tab" onclick="select Tab(this);">WEL COME</td>
<td class="tab" onclick="select Tab(this);">NOW HIRING</td>
<td class="tab" onclick="select Tab(this);">OUR TEAM</td>
</tr>
</table>
<script type="text/javascript">
var table;
if (document.getEl ementById &&
(table = document.getEle mentById('myTab s')) &&
table.getElemen tsByTagName)
{
selectTab = function(cell)
{
var table = findParentNode( cell, 'table');

if (table)
{
var cells = table.getElemen tsByTagName('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 getElementByTag Name(). 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 getElementsByTa gName()
everytime the function is invoked and any possible errors that might
occur if the -onclick- event fires but -selectTab- weren't yet defined.

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

ARRRGH!

ARRRGH!

Comment

Comment