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个标签的行，“项目”标签是用户访问该页面时默认选中的标签。

有没有办法制作一个可以链接到此页面并自动选择“人物”标签的按钮？

以下是苗条中的相同代码：

  ...
  .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：代码到目前为止：

苗条：

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

当页面加载时，它将从网址获取哈希并将活动类添加到选项卡中，该链接具有相同的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');
           }
    });

重定向时自动选择选项卡

1 个答案: