javascript - 如何链接到页面并使用 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")

因此，在您的信息页面 View 中，您可以尝试从 params[:active_tab] 检索它，以便您可以根据该值设置事件属性。 希望这有帮助，祝你好运

编辑: 如果您使用 Bootstrap 选项卡 ( 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>

希望这能让大家清楚!另外，必须测试它，但认为这有效