javascript - 重定向时自动选择选项卡

Question

我正在 Rails 网站上运行 ruby​​，它目前支持 javascript 和 jquery。我正在使用 htmlslim、scss 和 bootstrap。

我想知道是否可以有一个按钮或链接将用户发送到另一个页面，然后自动单击该页面上的选项卡。

例如，我有一个包含以下已编译 html 的页面:

...
<div class="row">
  <ul class="nav nav-tabs profile-tabs" id="userTabs">
    <li class="active" id="userItems" role="presentation">
      <a data-toggle="tab" href="#items" role="tab">
        <span class="key">Items</span>
        <span class="value">13</span>
      </a>
    </li>
    <li role="presentation">
      <a class="stand-card-activate" data-toggle="tab" href="#people" role="tab">
        <span class="key">People</span>
        <span class="value">3</span>
      </a>
    </li>
  </ul>
</div>
...

这是一行有 2 个选项卡的选项卡，“项目”选项卡是用户访问该页面时默认选择的选项卡。

是否有某种方法可以制作一个可以链接到此页面并自动选择“人员”选项卡的按钮？

这是 slim 中的相同代码:

  ...
  .row
    ul#userTabs.nav.nav-tabs.profile-tabs
      li#userItems.active[role="presentation"]
        a(href="#items" role="tab" data-toggle="tab")
          span.key Items
          span.value = @user.items.count
      li(role="presentation")
        a.stand-card-activate(href="#people" role="tab" data-toggle="tab")
          span.key people
          span.value = @people_count
    ...

编辑2:到目前为止的代码:

slim :

a.back-to-user-people-btn.pull-left(href=www.yourpage.com/#people) Back to People

JS:

var hash= window.location.hash;
  if(hash.length > 0 ) {
    $('a[role="tab"]').parent().removeClass('active');//remove the default active tab
    $('a[href="'+hash+'"]').parent().addClass('active');
  }

这个 jquery 允许它突出显示正确的选项卡名称并“事件”，但项目选项卡的内容仍然是用户看到的内容。

编辑3:显示选项卡内容精简代码

.tab-content
    #items.tab-pane.fade.active.in.col-md-12(arialabelledby="items" role="tabpanel")
      .card-container = render partial: 'partials/item', collection: @user[:items], as: :user_item, locals: {user: @user}

    #people.tab-pane.fade.active.in.col-md-12(arialabelledby="people" role="tabpanel")

Answer 1

尝试这样的事情

链接应如下所示:www.yourpage.com/#tabhrefid

当页面加载时，它将从 url 中获取哈希值，并将事件类添加到具有相同 href 的链接的选项卡

  $(function(){
      var hash= window.location.hash;
          if(hash.length > 0 ) {
              $('a[role="tab"]').parent().removeClass('active');//remove the default active tab
              $('a[href="'+hash+'"]').parent().addClass('active');
              $('.tab-pane').removeClass('active');
              $(hash).addClass('active');
           }
    });