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

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!