How to link to a page and have a specific tab active with rails

user_7372897 0
Viewed 3166

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 depending on the link used?

I want to have a link like this: 

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

Lead to my info page with the Terms tab active like this:

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

I was wondering how to change the "active" status based on the link from a different page on my site. Does the active status need to be changed on the specific tabpanel instead? Thank you!

This is the tab section from the info page:

<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 -->
twitter-bootstrap ruby-on-rails jquery javascript
3 Answers

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

# 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>
user_120990130
Related