How To Link To A Page And Have A Specific Tab Active With Rails

If an info page has multiple tabs based on different topics and there are links leading to the info page from different pages, how do you link to the info page with an active tab d

Solution 1:

You can pass params on link_to method. Something like:

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

So, in your info page view, you can try to retrive it from params[:active_tab], so you can set your active attribute based on that value. Hope this helps, good luck

EDIT: If you're using bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp), you can set some tab as active by adding the active class to the "li" element, like this:

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

So, wherever you put a link to that info page, you should pass a param that indicates which tab will be active, something like this:

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

Then, on your info page, you check the params[:active_tab] to determine which tab will be active. Something like:

<ulclass="nav nav-tabs"role="tablist"><lirole="presentation #{params[:active_tab]=='about' ? 'active' : '' }"><ahref="#about"aria-controls="about"role="tab"data-toggle="tab">
      About
    </a></li><lirole="presentation #{params[:active_tab]=='advertise ? 'active' : '' }"><ahref="#advertise"aria-controls="advertise"role="tab"data-toggle="tab">
      Advertise
    </a></li>

   ... and so it goes on

</ul>

Hope this makes it clear! Also, has to test it, but think this works

Solution 2:

I've tried with a bit of Javascript.

Add an identifier to your li element inside the ul.nav.nav-tabs, this way it could be easily reached with the params sent, like:

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

Then, the same for your div tag with role="tabpanel", like:

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

Then in the previouse view, you can add a link_to helper, passing the tab you want to make active, like:

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

Then in the view where are the tabs, add an script which take the params[:tab] and check if they're sent or not, if so then get your li and div elements, remove the class active from the first li and add active to the new elements:

<script>
  if ('<%= params[:tab] %>' !== '') { 
    letparams = '<%= 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>

Make sure the id terms-tab and all the identifiers for each div with role tabpanel are equal to the href attributes in their anchor tags.

You can see here a working demo.

Solution 3:

Posting my solution here in case someone needs it.

I wanted to have a default option in case there was no parameter. I am using Bootstrap's Navs.

# Passing a params on'link_to'method

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