PDA

Click to See Complete Forum and Search --> : Tab Navigation

mili
04-08-2003, 06:25 PM
I've constructed tabs using image corners and plain text.

My code looks something like this:

<tr>
<td><img src="left_on.gif"></td>
<td bgcolor="red">Tab 1</td>
<td><img src="right_on.gif"></td>
</tr>

<tr>
<td><img src="left_off.gif"></td>
<td bgcolor="blue">Tab 2</td>
<td><img src="right_off.gif"></td>
</tr>

<tr>
<td><img src="left_off.gif"></td>
<td bgcolor="blue">Tab 3</td>
<td><img src="right_off.gif"></td>
</tr>

When I click tab 2, I want to change

1. left_off.gif to left_on.gif for tab 2
2. right_off.gif to right_on.gif for tab 2
3. bgcolor for tab 2 to red.
4. bgcolor for tab 1 to blue
5. left_on.gif to left_off for tab 1
6. right_on.gif to right_off for tab 1

How can I do this?

Thanks in advance,
mili
04-08-2003, 06:49 PM
Here is the zip file:

Thanks,
mili
04-08-2003, 07:00 PM
Dave,

I gave you some random bgcolors for td.
Here are the colors to be more specific:

tab 1: bgcolor= #333366
tab 2: bgcolor= #5389BC

thanks
JackTheTripper
04-08-2003, 07:30 PM
One way to do it...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

<html>
<head>

<script>
function changeTab(hideDaPage,showDaPage) {

document.getElementById(hideDaPage).style.display = "none"
document.getElementById(showDaPage).style.display = "block"
}

</script>
</head>
<body>
<div tabs menu>
<table width="250" border="0" cellspacing="0" cellpadding="0" id= "tabOne" style= "display: block">
<tr>
<td width="1%"><img src="tab_left_on.gif" width="8" height="19"></td>
<td bgcolor="333366">
<div align="center"><b><font color="#FFFFFF"><a href="#" onClick = "changeTab('tabOne','tabTwo'); return false"><font color="#FFFFFF">Tab 1</font></a></font></b></div>
</td>
<td width="1%"><img src="tab_right_on.gif" width="8" height="19"></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="3" height="58">
<p align="center">Content goes here </p>
</td>
</tr>
</table>

<table width="250" border="0" cellspacing="0" cellpadding="0" id= "tabTwo" style="display: none;">
<tr>
<td width="1%"><img src="tab_left_off.gif" width="8" height="19"></td>
<td bgcolor="5389bc">
<div align="center"><b><a href= "#" onClick= "changeTab('tabTwo','tabOne')"><font color="#FFFFFF">Tab
2</font></a></b></div>
</td>
<td width="1%"><img src="tab_right_off.gif" width="8" height="19"></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="3" height="58">
<p align="center">Other Content goes here </p>
</td>
</tr>
</table>
</div>

</body>
</html>
mili
04-08-2003, 07:43 PM
Thanks for your response, Jack.
But I need to be able to display multiple tabs in a row and switch images/bgcolor as I tab through.I have all the links from the tabs targetting to an iframe below it.
JackTheTripper
04-08-2003, 08:00 PM
<little jewish man> Eh! I try! What more can I do?</little man>

Good luck!
mili
04-09-2003, 09:11 AM
Thanks Dave. That's exactly what I wanted.It is very helpful for and now i dont have to create images for tabs, which I wanted to avoid.

many thanks again