Simple tabs not working so simply.

**alexjewell** · 06-10-2007, 03:30 AM

I have a page with 4 different "tabs". I created a simple onclick event to each link. Here is the html:

HTML Code:

<p><a href="#" onclick="poetry.style.display='block'; thoughts.style.display='none'; questions.style.display='none';">Poetry</a> | 
<a href="#" onclick="poetry.style.display='none'; thoughts.style.display='block'; questions.style.display='none';">Thoughts</a> | 
<a href="#" onclick="poetry.style.display='none'; thoughts.style.display='none'; questions.style.display='block';">Questions?</a></p>

<div id="poetry">Poetry content</div>
<div id="thoughts">Thoughts content</div>
<div id="questions">Questions content</div>

And I have simple css to go along with it:

Code:

#poetry{
display: block;}

#thoughts, #questions{
display: none;}

Now, for some reason this isn't working. In FireFox, nothing happens when you click on another tab - Poetry is the only one that will show up. In IE7, all three div's show up in order and clicking on the tabs does nothing. Is there a better way of doing this? What am I doing wrong?

**turkey1605** · 06-10-2007, 11:53 AM

Firstly, in the onclick procedure, you need to 'grab' (I'm sure there's a more technical name out there!) the layer you want to make visible/hidden:

Code:

var obj=document.getElementById(layer name)

Then from this you can set the style.display property:

Code:

obj.style.display="block";

Secondly, when making <a>'s point to javascript functions, I've always used a 'javascript://' in the href value. Then you use the onclicks (like you have) to carry out the javascript.

so my suggestion would be this:

HTML:

Code:

<p><a href="javascript://" onclick="show_layer(1)">Poetry</a> |
<a href="javascript://" onclick="show_layer(2)">Thoughts</a> |
<a href="javascript://" onclick="show_layer(3)">Questions?>/a></p>

<div id="poetry">Poetry content</div>
<div id="thoughts">Thoughts content</div>
<div id="questions">Questions content</div>

Then in the <head> section:

Code:

<script type="text/javascript">
function show_layer(lyr)
{
var obj;
obj=document.getElementById("poetry"); //Hide ALL layers
obj.style.display="none";
obj=document.getElementById("thoughts");
obj.style.display="none";
obj=document.getElementById("questions");
obj.style.display="none";

//Grab the correct layer:

if(lyr==1)
{
obj=document.getElementById("poetry");
}if(lyr==2)
{
obj=document.getElementById("thoughts");
}if(lyr==3)
{
obj=document.getElementById("questions");
}
obj.style.display="block"; //Make it visible}
</script>

That should do it! One more thing, though: you said there were 4 tabs but I only see 3.

**alexjewell** · 06-10-2007, 12:53 PM

Hey, thanks man! It works.

Thread: Simple tabs not working so simply.

Thread Tools

Search Thread

Simple tabs not working so simply.

Bookmarks

Bookmarks

Posting Permissions