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

Posted 2023-05-08

【中文标题】如何链接到页面并使用 Rails 激活特定选项卡

【英文标题】：How to link to a page and have a specific tab active with rails

【发布时间】：2017-12-28 15:12:15

【问题描述】：

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

我想要这样的链接：

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

【问题讨论】：

向我们展示您的信息页面代码。

@Pavan 我刚刚在我的信息页面的标签部分中添加了，感谢您的提问！

【参考方案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")

然后，在您的信息页面上，您检查参数 [: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>

希望这能说明问题！另外，必须对其进行测试，但认为这可行

【讨论】：

嘿，感谢您的回答，但我不明白您从params[:active_tab] 检索的意思。这是我需要创建一个方法还是将其简单地添加到信息页面上的选项卡窗格/选项卡按钮？谢谢！

因为你调用了我上面描述的方法link_to，“active_tab”将是一个你可以在视图中检索的参数。因此，在您的信息页面上，您可以使用 params[:active_tab] 访问该值。因此，您可以调用诸如'link_to "here"、info_path(active_tab: "privacy")' 之类的方法。在您看来，您可以在 params[:active_tab] 变量上获取该值并设置“隐私”，如图所示。希望这能说明问题

我要问，你能提供一些代码吗？我真的不知道应该在哪里包含 params[:active_tab]。

@Jake 用一个例子更新了代码。必须对其进行测试，但附近的一些方法应该可以工作

我测试了这段代码，还尝试将#params[:active_tab]=='advertise ? 'active' : '' 部分放在我的每个选项卡窗格上，并使用它们各自的params 并没有工作。如果您能找到解决方案，将不胜感激！

【参考方案2】：

我尝试了一些 javascript。

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

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

然后，您的div 标记与role="tabpanel" 相同，例如：

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

然后在前面的视图中，你可以添加一个link_to 助手，传递你想要激活的标签，比如：

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

然后在选项卡在哪里的视图中，添加一个带有params[:tab] 的脚本并检查它们是否已发送，如果是，则获取您的li 和div 元素，删除类@987654334 @ 从第一个 li 开始并添加 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 一个工作演示。

【讨论】：

我在我的链接中实施了您的策略，但按下链接时它没有打开任何选项卡。它只链接到最后带有#terms 的URL。为什么它没有根据按下的链接打开标签？谢谢！

它适用于 about 选项卡（默认为活动状态，没有活动状态），但即使我将此代码集成到所有其他链接和选项卡中，它也只加载 about 选项卡，所有其他选项卡都加载为空选项卡，但已选择选项卡。然后所有其他选项卡在按下它们的选项卡时都不会加载，需要重新输入 URL 作为信息页面的默认 URL。

好吧，经过一段时间的研究，问题是这样，因为我将元素的id更改为terms-tab，然后锚点也指向那个，试试#terms-tab在li 元素内的锚点中。

我试用了您更新的代码，但我注意到它控制了下一个<div>。我在整个网站的某些选项卡中有多个 div，我注意到这会导致它无法工作（因为它没有）。这个脚本是否只能影响<div role="tabpanel" class="tab-pane fade in" id="about"> 的类？感谢您坚持这个问题，到目前为止，您提供了很大的帮助。

检查this repo @Jake，因为我没有你的代码很难说它是否满足你自己项目中的所有需求，

【参考方案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>