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

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

我想要一个像这样的链接：

<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 -->

您可以传递参数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 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>

希望这可以清楚地说明！另外，必须测试它，但认为这有效