How do I get a link to open a specific tab on a page?

Question

I am working on a site for a client that has jquery driven tabbed content.

Linking to the correct page is easy enough, but the challenge is to open to the correct tab when you get there. On the about page scroll to the bottom and click on the Move it icon (the one with the truck). This takes you to the move it page. This works fine, but I would like it to be able to open the Specialty tab.

Here is the code that links to the page:

<li><a id="moveit" href="services_move_it.html">Move It</a></li>

I tried this, but it does not work correctly

<li><a id="moveit" href="services_move_it.html#specialty">Move It</a></li>

Here is the code for the tabs on the destination page:

<div id="specialty-content" class="content">
   <p class="intro">Moving Simplified specializes in moving items such items as pool tables, pianos, antiques, and anything else you can throw at us.</p> 
   <div class="video-link">
    <a href="#">Watch the Move It Specialty Videos Now.</a>
   </div>
   <p>  Moving such items is more complicated than most would understand, and is an art form in itself.  We take pride in making sure that your priceless possessions are delivered damage free.  The employees sent to move your belongings are highly experienced in these types of items.  They will always  be well equipped to complete the move with the most up to date technology in the moving industry.</p><p> We will always pad and wrap each individual piece, as well as provide custom crates to ensure the safety of your pool table slate.</p>
   <div class="msg">
     <p><strong>Want to download the Move It Specialty guide?</strong> Go here <a href="#">now</a>.</p>
   </div>
</div>

Here is the jquery for operating the tabs:

$(document).ready(function() {
/* this is for the tabbed content */
$("a.tab").click(function( evt ) {
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();

    var content_show = $(this).attr("id");
    $("#" + content_show + '-content').slideDown();
});

Because I will need to do this on multiple link/tab combos I would like to find a systematic approach.

Thanks for any help!

Answer 1

I need JS code to handle a hashpart. It could look somewhat like this.

handleHashPart = function(tabs) {
  var hashPart = window.location.hash;
  if (! hashPart || hashPart.length === 0) {
    return;
  }
  tabs.each(function() {
    var link = $(this);
    if (link.attr('href') == hashPart) {
      link.trigger('click');
      return false;
    }
    return true;
  });
};

handleHashPart($('a.tab'));

Put this after you attach your handler. Now your link should work.

Answer 2

Hi fmz,

I recently tried to build my own tabs. I changed the code to fit your needs, but I'm not sure if it works:

Make sure the id of your link is the same as what you put after the #

var curtab = window.location.href; // Get the url
    curtab = curtab.split("#"); // Split the url at #
    curtab = "#" + curtab[1]; // Put the info after the # in a variable

    $("a.tab").each(function(i){ // Loop through all links and compare tab from url with value in link
        if(curtab == $(this).attr("href")){
            $(this).addClass("active"); // If they are the same, set that tab's class to active
        }
    });

$("a.tab").click(function(){ // Select tab
        $(".active").removeClass("active"); // Select the a, remove class for every link
        $(this).addClass("active"); // Select the clicked tab and add an active class
        var tabtocall = $(this).children().attr("href"); // Var to select current clicked tab
        $(".content").slideUp; // Slide up all content
        $(tabtocall).slideDown("normal"); // Slide down the selected content
    });

Hope this helps!

Edit:

The code below is to set the tab link to active (see comment) based on your structure.

    $(".tabs a").each(function(i){ // Loop through all the links
        if(curtab == $(this).attr("id")){ // Compare the value from the url with the id
            $(this).addClass("active"); // If equal add class active
        }
    });

Answer 3

Hi fmz,

This is easily implemented using Ariel Flesler's jQuery plugins along with the standard jQuery UI Tabs widget:

• jQuery UI Tabs widget
• jQuery.LocalScroll
• jQuery.ScrollTo

You'll find a detailed "how to" in the blog posting at:

http://weblog.muledesign.com/2009/05/bookmarkable_tabs_with_jquery_ui.php

This approach requires a minimal amount of code and can be generalized across all your pages.

First, set up tabs using the jQuery UI Tabs widget.

Include the jQuery plugins on the pages that use tabs:

<script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script>
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script>

Then add this (substituting "#tabs" for whatever div you're using):

$(document).ready(function() {
  if($("#tabs") && document.location.hash){
    $.scrollTo("#tabs");
  }
  $("#tabs ul").localScroll({ 
    target:"#tabs",
    duration:0,
    hash:true
  });
});

And that's it!