SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript novice - jQuery tabbing help?

    Hi all been trying to understand how to create some sort of tabbing box on my web page.

    I've Download the latest jQuery from there website

    What I have so far:
    Code JavaScript:
    <title>Tab Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
        <script type="text/javascript">
          // Your code goes here
    	  $(document).ready(function(){
        $("#example > ul").tabs();
      });
        </script>
    </head>
     
    <body>
     
    <a href="#tab1">tab1</a> <a href="#tab2">tab2</a> <a href="#tab3">tab3</a>
     
    <div id="tab1"></div>
    <div id="tab2"></div>
    <div id="tab3"></div>
     
    </body>

    What next? Big thanks in advance

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see you got the..

    Code:
    $("#example > ul").tabs();
    ...from the jQuery documentation, I'd suggest you click the "View Source" tab on this page to see how it's used. For starters you don't have any unordered lists in your HTML.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pete

    UPDATE

    Why is it still showing all 3 div containers 'tab1 tab2 tab3' when I load the page? Shouldn't tab2 and tab3 be hidden?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Tab Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="scripts/jquery/jquery-1.2.4b.js" type="text/javascript"></script>
    <script src="scripts/jquery/ui.core.js" type="text/javascript"></script>
    <script src="scripts/jquery/ui.tabs.js" type="text/javascript"></script>
    <script>
      $(document).ready(function(){
        $("#example > ul").tabs();
      });
      </script>
    <link href="structure.css" rel="stylesheet" type="text/css">
    <link href="appearance.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    <div id="wrapper">
    <div id="example">
    
    <ul id="example">
    	<li><a href="#tab1"><span>One</span></a></li>
    	<li><a href="#tab2"><span>Two</span></a></li>
    	<li><a href="#tab3"><span>Three</span></a></li>
    
    </ul>
    
    <p>&nbsp;</p><p>&nbsp;</p>
    <div id="tab1">tab1</div>
    <div id="tab2">tab2</div>
    <div id="tab3">tab3</div>
    
    </div>
    
    </div>
    </body>
    </html>
    Thanks

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys this is an older post but I thought I'd just add to the problem here..

    Ok the above all works with some .css style I've applied but I'm now having problems with my back button on the browser.. how can I get the page to jump back to which tab was last selected and not switch to the default tab?

    hope I'm making sense here.. big thanks in advance

    CB
    Last edited by computerbarry; Jul 29, 2008 at 05:45.


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
  •