jquery - 链接到特定的 jquery 选项卡

Question

我一直在寻找答案。我遇到的问题是我的标签有某些样式特征需要保持不变。以下是我正在处理的页面：

http://nextadagency.com/theta/services.html

我正在尝试为每个选项卡创建链接（在单独的页面上）。当“服务”页面加载时，让它加载选定的选项卡，在顶部有一个唯一的#地址，并在页面顶部加载。由于某种原因，当我之前尝试链接到特定选项卡时，它会根据选项卡将页面加载到不同的区域。

Answer 1

您可以使用 url # (hash) 和 tabsselected选项：

$('#tabs').tabs({
   selected: $('#tabs > ul > li > a[href='+window.location.hash+']').index()
});

然后当你去类似的东西时：

http://nextadagency.com/theta/services.html#tabs1

它将加载具有...的选项卡

您还可以在每次更改选项卡时将哈希添加到 url：

$('#tabs').tabs({
   select: function(e, ui){
      window.location.hash =  $(ui.tab).attr('href').replace(/\#/, '');
   }
});

Answer 2

为了避免默认的散列行为（页面跳转），我使用了 URL 参数。在您的情况下，这将导致例如http://nextadagency.com/theta/services.html?tab=3

  $(function() {
    // update URL parameter and browser history on manual tab select
    $('#tabs').bind('tabsselect', function(event, ui) {
      var myTab = $(ui.tab).attr('href').replace('#', '');
      var myParam = '?tab=' + myTab;
      window.history.pushState('Object', 'Title', myParam);
    });

    // get 'tab' URL parameter and select tab
    var param = $(document).getUrlParam('activity');
    $('#tabs').tabs('select', param);
  });

这对你来说可能有点过头了，但至少你需要停止默认的哈希行为，可能使用preventDefault().