jQuery - 检查锚点的URL

时间:2011-03-19 23:04:28

标签: javascript jquery tabs

我使用基于jQuery minitabs的jQuery创建了一个非常简单的选项卡界面:

$(".tabs .nav").delegate("a", "click", function(){
  var tabs = $(this).closest(".tabs");
  var target = $(this).attr("href").split('#')[1];

  $(".nav a", tabs).removeClass("active");
  $(this).addClass("active");

  $("input.active-tab", tabs).val(target);

  //hide the tabs that doesn't match the ID
  $('.tab:not(.'+target+')', tabs).hide();
  $('.tab.'+target, tabs).show();

  return false;
});

标记看起来像:

  <div class="tabs">

    <input type="hidden" class="active-tab" name="active-tab" value="tab1" />

    <ul class="nav">
      <li><a href="#tab1" class="active">tab1</a></li>
      <li><a href="#tab2">tab2</a></li>
      <li><a href="#tab3">tab3</a></li>
    </ul>

    <div class="tab tab1">
    ....
    </div>

    <div class="tab tab2">
    ....
    </div>

    <div class="tab tab3">
    ....
    </div>
  </div>

它工作正常,但我想这样做,因此可以根据当前的URL设置活动选项卡。

例如。如果我粘贴此网址:http://site.com/page.php#tab2,我希望tab2显示为有效

我该怎么做?

1 个答案:

答案 0 :(得分:1)

位于window.location.hash

您可以在$(".tabs .nav")中搜索具有相同哈希值并触发点击的链接