SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Tabs - Linking to anchors within a closed tab

    Is that even possible? Say you have 2 tabs, one of which is open by default when the page loads. You have a menu on the page that links to anchors within the closed tab. Is there a way - when clicking on the menu link - to open the closed tab and go to the anchor?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Possible, for sure. You could use the .tabs( "select" , index ) method once you know the index of the tab the link lives in. Here's how you might do it.

    1. Grab the href on click, and then get the string after the "#"
    2. Select the anchor by name, then find traverse up to find the tab container (if it's in a tab)
    3. Get the index of the tab
    4. Select the tab using that index

    Make sense?

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been searching the web for a couple days trying to figure this exact problem out!
    @raw10 - what you say makes sense, but I'm fairly new to javaScript and could use a little more help - do you have an example of the code that you would use to accomplish this?

    Thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm, ok. I just slapped it together really quick, but here you go. No promises that it will work perfectly for you, but it should get you started.

    Demo | Download

    The HTML might look something like this:

    Code:
        <ul>
          <li><a class="openTab" href="#tab1">Target anchor in tab 1</a></li>
          <li><a class="openTab" href="#tab2">Target anchor in tab 2</a></li>
          <li><a class="openTab" href="#tab3">Target anchor in tab 3</a></li>
        </ul>
        <!-- Tabs -->
        <h2 class="demoHeaders">Tabs</h2>
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
          </ul>
          <div class="tab" id="tabs-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ma\
    gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a name="tab1">This is a named anchor in tab 1.</a>
          </div>
          <div class="tab" id="tabs-2">
            <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas sceleri\
    sque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
            <a name="tab2">This is a named anchor in tab 2.</a>
          </div>
          <div class="tab" id="tabs-3">
            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis e\
    t, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
            <a name="tab3">This is a named anchor in tab 3.</a>
          </div>
        </div>
    Then, your JS could be:

    Code:
    $(function() {
    
            // Tabs                                                                                                              
            var $tabs = $("#tabs").tabs();
    
            // Handle clicks for on-page links                                                                                   
            $("a.openTab").click(function(e) {
                    var thisName = "";
                    var $tabParent = null;
                    var tabIndex = 0;
    
                    // Prevent default click behavior                                                                            
                    e.preventDefault();
    
                    // Get the named anchor from the clicked link's href                                                         
                    thisName = $(this).attr("href").split("#")[1];
    
                    // Find the tab parent. Tabs should all have class "tab".                                                    
                    $tabParent = $("a[name='" + thisName + "']").closest(".tab");
    
                    // Get the index of this tab                                                                                 
                    tabIndex = $(".tab").index($tabParent);
    
                    // Open the appropriate tab                                                                                  
                    $tabs.tabs("select", tabIndex);
    
                });
    
        });
    Of course, it requires a jQuery UI build that includes the tabs module. Take a look at the full download to see how that works if you're not familiar with it.

    Cheers!

    -Rob

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to recreate the "tabs" feature on the top of yahoo's homepage. http://www.yahoo.com/

    Is there a prebuilt solution for this? I don't really feel like skinning jquery ui tab. It's a pain.


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
  •