如何链接到页面并使用rails激活特定选项卡

Question

如果信息页面有多个基于不同主题的选项卡，并且存在从不同页面指向该信息页面的链接，如何根据使用的链接链接到具有活动选项卡的信息页面？

我想要一个这样的链接：

<p>View the terms & conditions on our info page <%= link_to "here", info_path %>, thanks.</p>

进入我的信息页面，其中Terms选项卡处于活动状态，如下所示：

<li role="presentation">
  <a href="#terms" class="active" aria-controls="terms" role="tab" data-toggle="tab">
    <h2>Terms</h2>
    <p>These are the terms.</p>
  </a>
</li>

我想知道如何根据我网站上不同页面的链接来更改“活动”状态。是否需要在特定tabpanel上更改活动状态？谢谢!

这是信息页面中的选项卡部分：

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#about" aria-controls="about" role="tab" data-toggle="tab">
      About
    </a>
  </li>

  <li role="presentation">
    <a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
      Advertise
    </a>
  </li>

  <li role="presentation">
    <a href="#legal" aria-controls="legal" role="tab" data-toggle="tab">
      Legal
    </a>
  </li>

  <li role="presentation">
    <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">
      Privacy
    </a>
  </li>

  <li role="presentation">
    <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">
      Terms
    </a>
  </li>
</ul>

<!-- TAB PANES -->
<div class="tab-content" id="infoTabContent">
  <!-- TAB DIVIDER -->
  <div role="tabpanel" class="tab-pane fade in" id="about">
    <h3>About</h3>
    <div class="indent">
      <p>This is the about tab using a div to indent lines</p>
    </div>
  </div>
  <!-- TAB DIVIDER -->
  <div role="tabpanel" class="tab-pane fade" id="advertise">
    <h3>Advertise</h3>
  </div>
  <!-- TAB DIVIDER -->
  <div role="tabpanel" class="tab-pane fade" id="legal">
    <h3>Legal</h3>
  </div>
  <!-- TAB DIVIDER -->
  <div role="tabpanel" class="tab-pane fade" id="privacy">
    <h3>Privacy</h3>
  </div>
  <!-- TAB DIVIDER -->
  <div role="tabpanel" class="tab-pane fade" id="terms">
    <h3>Terms</h3>
  </div>
  <!-- TAB DIVIDER -->
</div><!-- Tab Content -->

Answer 1

您可以在link_to方法上传递参数。类似于：

link_to "here", info_path(active_tab: "your_active_tab_name")

因此，在您的信息页面视图中，您可以尝试从params[:active_tab]检索它，以便您可以基于该值设置活动属性。希望这能帮上忙，祝你好运

编辑:如果您正在使用引导选项卡(https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp)，您可以通过将活动类添加到"li“元素来将某些选项卡设置为活动的，如下所示：

  <li role="presentation active">
    <a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
      Advertise
    </a>
  </li>

因此，无论您在何处放置指向信息页面链接，都应该传递一个参数来指示哪个选项卡将处于活动状态，如下所示：

link_to "more info", info_path(active_tab: "advertise")

然后，在您的信息页面上，检查params:active_tab以确定哪个选项卡将处于活动状态。类似于：

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation #{params[:active_tab]=='about' ? 'active' : '' }">
    <a href="#about" aria-controls="about" role="tab" data-toggle="tab">
      About
    </a>
  </li>

  <li role="presentation #{params[:active_tab]=='advertise ? 'active' : '' }">
    <a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
      Advertise
    </a>
  </li>

   ... and so it goes on

</ul>

希望这能让你明白！另外，我必须测试它，但我认为这是可行的

Answer 2

我试过使用一点Javascript。

在ul.nav.nav-tabs内的li元素中添加一个标识符，这样就可以通过发送的参数轻松地访问它，例如：

<li role="presentation" id="terms-li">
  ...
</li>

然后，对role="tabpanel"使用相同的div标记，如下所示：

<div role="tabpanel" class="tab-pane fade" id="terms-tab">
  ...
</div>

然后在previouse视图中，您可以添加一个link_to帮助器，传递您想要激活的选项卡，如下所示：

<p>
  View the terms & conditions on our info page 
  <%= link_to 'here', root_path(tab: 'terms') %>, thanks.
</p>

然后在where are the tab视图中，添加一个脚本，该脚本获取params[:tab]并检查它们是否已发送，如果已发送，则获取li和div元素，从第一个li中删除active类，并将active添加到新元素中：

<script>
  if ('<%= params[:tab] %>' !== '') { 
    let params = '<%= params[:tab] %>',
        li = document.getElementById(params + '-li'),
        tab = document.getElementById(params + '-tab'),
        ul = document.querySelectorAll('ul.nav.nav-tabs > li')[0].classList,
        div = document.querySelectorAll('div.tab-content > div')[0].classList

    ul.remove('active')
    div.remove('in', 'active')
    li.classList.add('active')
    tab.classList.add('in', 'active')
  }
</script>

确保id terms-tab和角色为tabpanel的每个div的所有标识符都等于其anchor标记中的href属性。

您可以查看here的工作演示。

Answer 3

在这里张贴我的解决方案，以防有人需要它。

我希望有一个缺省选项，以防没有参数。我正在使用Bootstrap's Navs。

# Passing a params on 'link_to' method

# View with links

<%= link_to "Tab Index", tabs_path %>
<%= link_to "Tab 1", tabs_path(tab: 'tab_1') %>
<%= link_to "Tab 2", tabs_path(tab: 'tab_2') %>
<%= link_to "Tab 3", tabs_path(tab: 'tab_3') %>

# Adding 'active' class to navs based on params

# View with tabs

<%# Tabs %>
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#tab_index" data-toggle="tab" role="tab" class="nav-link <%= "active" unless params.has_key?(:tab) %>">Tab Index</a>
  </li>
  <li class="nav-item">
    <a href="#tab_1" data-toggle="tab" role="tab" class="nav-link <%= "active" if params[:tab] == "tab_1" %>">Tab 1</a>
  </li>
  <li class="nav-item">
    <a href="#tab_2" data-toggle="tab" role="tab" class="nav-link <%= "active" if params[:tab] == "tab_2" %>">Tab 2</a>
  </li>
  <li class="nav-item">
    <a href="#tab_3" data-toggle="tab" role="tab" class="nav-link <%= "active" if params[:tab] == "tab_3" %>">Tab 3</a>
  </li>
</ul>

<%# Tab content %>
<div class="tab-content">
  <div class="tab-pane <%= "active" unless params.has_key?(:tab) %>" id="tab_index">Tab Index Content</div>
  <div class="tab-pane <%= "active" if params[:tab] == "tab_1" %>" id="tab_1">Tab 1 Content</div>
  <div class="tab-pane <%= "active" if params[:tab] == "tab_2" %>" id="tab_2">Tab 2 Content</div>
  <div class="tab-pane <%= "active" if params[:tab] == "tab_3" %>" id="tab_3">Tab 3 Content</div>
</div>