SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Tabs

  1. #1
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabs

    I am trying to learn how to create those nifty tabs, that chance a section of a page without reloading the page. In case I wasn't clear, they are the tabs that Yahoo! has all over the center section of it's main page.

    Does anyone know of a tutorial anywhere on how to create these?

    Thank you!

    Jon

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon

    Basically you just flip the display CSS property on some element between being visible and not being visible. Here's a quick example.

    Code HTML4Strict:
    <script type="text/javascript">
    function showtab(id) {
        //hide all tab divs
        for (i = 1; i <= 3; i++) {
            document.getElementById('tab_' + i).style.display = 'none';
        }
        //display the one that was clicked
        document.getElementById('tab_' + i).style.display = 'block';
    }
    </script>
     
    <a onclick="showtab(1)">Tab 1</a> 
    <a onclick="showtab(2)">Tab 2</a> 
    <a onclick="showtab(3)">Tab 3</a>
     
    <div id="tab_1" style="display: block">Tab 1 Contents</div>
    <div id="tab_2" style="display: none">Tab 2 Contents</div>
    <div id="tab_3" style="display: none">Tab 3 Contents</div>

    Making it look cool is just a matter of styling with some CSS.
    Last edited by Dan Grossman; Aug 12, 2008 at 12:25. Reason: oops removed 'int'

  3. #3
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan!

    Can you elaborate a bit. I am getting an error in IE. Also, I cannot click the tabs.

    Does the javascript go in the body or head? Sorry, I'm not good with javascript!

    Thank you,

    Jon

  4. #4
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this what you use on W3? They look great! I just can't get them to work! Can you spoon feed me a bit?

    Thanks,

    Jon

  5. #5
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been playing around with the code, and still can't get it! Can somebody please help me! Here's what I have: http://www.azfans.com/Tabstest.html

    As you can see, the tabs don't work! I'd like them to look like: http://azfans.com/tabs.jpg

    I would be extremely grateful for any help! Please!!!

    Thank you!

  6. #6
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    1) One letter typo in my example:

    Code:
    <script type="text/javascript">
    function showtab(id) {
        //hide all tab divs
        for (i = 1; i <= 3; i++) {
            document.getElementById('tab_' + i).style.display = 'none';
        }
        //display the one that was clicked
        document.getElementById('tab_' + id).style.display = 'block';
    }
    </script>
    2) You put the content divs inside #topbarcontainer with the fixed height, so even if it worked, you could never see the text.

  7. #7
    SitePoint Guru SSJ's Avatar
    Join Date
    Jan 2007
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the best one for beginner:
    http://www.dynamicdrive.com/dynamici...tabcontent.htm

  8. #8
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the help gentlemen!

    I have posted my progress here: http://www.azfans.com/Tabstest.html

    I have two questions...

    1) Why doesn't the hand cursor show up over the tabs?

    2) Why doesn't the "active" state show when the tabs are selected?

    I appreciate the help!

  9. #9
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Because the links have no href; ideally you would have the href of the links point to a page with the same content as the tab for accessibility.

  10. #10
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I add a href, it just takes the user to the link on click. I want them to work just like yours on W3, when it just shows the content, and highlights the active tab, but horizontal tabs rather than vertical. Thanks!


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
  •