Results 1 to 3 of 3

Thread: Simple tabs not working so simply.

  1. #1
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default Simple tabs not working so simply.

    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?
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  2. #2
    Join Date
    Jun 2007
    Location
    England
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    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.

  3. #3
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Hey, thanks man! It works.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •