PDA

Click to See Complete Forum and Search --> : how can i do "tabs"

pelegk1
12-03-2003, 07:03 AM
but with code?
i dont if i explaind ok but an example is attached
TheBearMay
12-03-2003, 07:24 AM
May want to look at using DIVs and the style.visibility attribute.
pelegk1
12-03-2003, 07:27 AM
a working example?
Gollum
12-03-2003, 07:27 AM
From what I've seen I think you want something like a tab control - i.e. your page has several stages of form entry before you are finished and you want to give the users the ability to select tabs to revisit stages, or something like this...

What you've got looks more or less like what you need - a table of images, one of which is highlighted in some way to give the impression it is the current tab.

hope this helps. :)
pelegk1
12-03-2003, 07:30 AM
i want to do it all in code~!
in my example it uses graphics!
have an example of code doing it?
Gollum
12-03-2003, 08:06 AM
Have a play with this...

<html>
<head>

<script type="text/javascript">
//<!--
function selectTab(n)
{
for ( i = 1; i <= 5; i++ )
{
document.getElementById('page' + i).style.visibility = (i==n) ? "visible" : "hidden";
document.getElementById('tab' + i).style.background = (i==n) ? "#c0ffc0" : "white";
}
}

//-->
</script>
</head>
<body>
<form name=f>
<table border=1>
<tr>
<td id=tab1 style="background-color:#c0ffc0;" onclick="selectTab(1);">Tab 1</td>
<td id=tab2 onclick="selectTab(2);">Tab 2</td>
<td id=tab3 onclick="selectTab(3);">Tab 3</td>
<td id=tab4 onclick="selectTab(4);">Tab 4</td>
<td id=tab5 onclick="selectTab(5);">Tab 5</td>
</tr>
<tr><td colspan=5>
<!-- must have an invisible filler span to size the table cell -->
<span style="width:200px;height:200px;visibility:hidden;">
<span id=page1 style="position:absolute;z-index:1; visibility:visible;">This is tab 1</span>
<span id=page2 style="position:absolute;z-index:1; visibility:hidden;">This is tab 2</span>
<span id=page3 style="position:absolute;z-index:1; visibility:hidden;">This is tab 2</span>
<span id=page4 style="position:absolute;z-index:1; visibility:hidden;">This is tab 3</span>
<span id=page5 style="position:absolute;z-index:1; visibility:hidden;">This is tab 4</span>
</td></tr>
</table>
</form>
</body>
</html>

Does this do what you want?
pelegk1
12-04-2003, 08:37 AM
i want 1 tab to be as like in fron of the others when it pressed
any idea?
ray326
12-04-2003, 08:41 AM
Have you read the "Sliding Doors" article on A List Apart?
pelegk1
12-04-2003, 08:45 AM
where?
ray326
12-08-2003, 08:41 AM
http://www.alistapart.com
pelegk1
12-09-2003, 04:56 AM
but sisnt find execlly what i wanted
have any idea?
can u redirect me...