Simple tabs not working so simply. [Archive]

View Full Version : 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:

<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:

#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:

var obj=document.getElementById(layer name)
Then from this you can set the style.display property:

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:

<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:

<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. :rolleyes:

alexjewell

06-10-2007, 12:53 PM

Hey, thanks man! It works.