如何获取打开页面上特定选项卡的链接？

Question

我工作的一个网站的拥有jQuery的驱动选项卡内容的客户端.

链接到正确的页面很容易,但挑战是当你到达那里时打开正确的选项卡.在about页面上滚动到底部,然后单击Move it图标(带卡车的图标).这会将您带到移动页面.这工作正常,但我希望它能够打开专业选项卡.

这是链接到页面的代码:

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

我尝试过这个,但它无法正常工作

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

以下是目标页面上选项卡的代码:

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

这是用于操作选项卡的jquery:

$(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();
});

因为我需要在多个链接/选项卡组合上执行此操作,我想找到一个系统的方法.

谢谢你的帮助!

Answer 1

使用Ariel Flesler的jQuery插件以及标准的jQuery UI Tabs小部件可以轻松实现这一点:

• jQuery UI Tabs小部件
• jQuery.LocalScroll
• jQuery.ScrollTo

您可以在博客文章中找到详细的"如何":

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

此方法需要最少量的代码,并且可以在所有页面中进行推广.

首先,使用jQuery UI Tabs小部件设置选项卡.

在使用标签的页面上包含jQuery插件:

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

然后添加这个(用"#tabs"代替你正在使用的div):

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

就是这样!