javascript - How to link to a page and have a specific tab active with rails - Stack Overflow

admin管理员组

文章数量:1023251

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

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

• javascript
• jquery
• ruby-on-rails
• twitter-bootstrap

Share Improve this question Follow edited May 22, 2018 at 17:37 Jake asked Jul 22, 2017 at 16:27 JakeJake 1,18611 gold badge1212 silver badges4343 bronze badges 2

• Show us your info page code. – Pavan Commented Jul 22, 2017 at 16:32
• @Pavan I just added in the tab section from my info page, thanks for asking! – Jake Commented Jul 24, 2017 at 15:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./bootstrap/bootstrap_ref_js_tab.asp), you can set some tab as active by adding the active class to the "li" element, like this:

  <li role="presentation active">
    <a href="#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:

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

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

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] %>' !== '') { 
    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>

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.

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>

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

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

• javascript
• jquery
• ruby-on-rails
• twitter-bootstrap

Share Improve this question Follow edited May 22, 2018 at 17:37 Jake asked Jul 22, 2017 at 16:27 JakeJake 1,18611 gold badge1212 silver badges4343 bronze badges 2

• Show us your info page code. – Pavan Commented Jul 22, 2017 at 16:32
• @Pavan I just added in the tab section from my info page, thanks for asking! – Jake Commented Jul 24, 2017 at 15:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./bootstrap/bootstrap_ref_js_tab.asp), you can set some tab as active by adding the active class to the "li" element, like this:

  <li role="presentation active">
    <a href="#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:

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

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

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] %>' !== '') { 
    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>

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.

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>

本文标签： javascriptHow to link to a page and have a specific tab active with railsStack Overflow