SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigate to Open Tab Using simple jQuery

    I tried to avoid installing the jQuery UI for only one page that uses very simple tabs. I built the tabbed page using directions from JQUERY: Novice to Ninja. They work just fine, but I cannot figure how to link to an open tab on the page that is not the default open one. Can anyone help me figure out how to do this? I have posted a simplified mockup at:

    http://www.technologistsinc.com/tabtest/tabs.html

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When you use the jquery from www.technologistsinc.com, an authentication request appears which when cancelled results in no jquery library being loaded.

    It appears that your code works though when I replace it with http://ajax.googleapis.com/ajax/libs.../jquery.min.js
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'ope!

    Sorry about that. I've copied 1.4 out of the staging site, so the "tabs.html" file works as above. But that's not the problematic file--it is "index.html" that won't work-- when you click a link to anything but the default tab in "Tabs.html", that tab won't be active when you jump. What do I need to do to solve that (short of installing the UI, which is severe overkill)?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You will need a way for the page to know which tab to activate.

    This is commonly done by giving the page body an identifier, so that from that id the script knows which tab to activate.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I understand. The link from "index.html" should find the target tab's index, right? That's how I did it in Spry... I just cannot figure out a syntax in jQuery.

    Can anyone point me in the right track? Do I need to create an indexing array in "tabs.html"'s header script, or do I need to add a string in "index.html"'s URL that addresses the 'clicked' variable?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the solution here:

    http://trevordavis.net/blog/tutorial...ed-navigation/

    Very elegant...


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
  •