jQuery Tabs - Linking to anchors within a closed tab

JavaScript
1

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

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

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

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 | [URL=“http://raw10.cust.magicedit.com/sandbox/jqueryTabs.zip”]Download

The HTML might look something like this:


    <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:


$(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

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.