Bootstrap 4 - redirect to a specific tab

Question

I'm using bootstrap 4 for a little project, I'm looking to have a system of "tabs", which is very well done on Bootstrap. the problem is that I try to redirect the use on a particular TAB. Do it via IDs and the <a> tag in html does not work and I do not have any knowledge of JS.

Here are the tabs :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" id="mdr">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">TAB 1</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">TAB TWO</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Three TABS</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

I would like with a link to be able to change the tab of the user (by a link) without clicking on the tab :(

Thank you!

Possible duplicate of [Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink](https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink) — Pedram, Jan 20 '18 at 13:22

ild flue · Accepted Answer · 2018-01-20T13:41:17.193

3

Have you tried to redirect the user to page-URL#tab_id?

If this does not work, I have tried the solution post at https://codepen.io/rnr/pen/dMNZmx It works well in my test.

Just copy the JS code to your HTML file, put it in between an open and a close script tag. like this (after loading the jquery package, i.e. after your code shown above. ):

<script>
/* COPY THE JS CODE HERE */
</script>

edited Jan 20 '18 at 13:41

answered Jan 20 '18 at 13:21

ild flue

1,323
8
9

there is a solution here: https://codepen.io/rnr/pen/dMNZmx. Just copy the JS code to your HTML file and make a little modification in necessary. – ild flue Jan 20 '18 at 13:30
Thank you very much ! I was looking for exactly that. The only problem is that when you click on the link, the tab does not take the "active" class, but it's not very serious – THOMAS Corentin Jan 20 '18 at 13:40
While this may answer the question, it is better to provide the actual information here and not just a link. [Link-only answers are not considered good answers and will probably be deleted](http://stackoverflow.com/help/deleted-answers). – elixenide Feb 05 '18 at 12:46

Bootstrap 4 - redirect to a specific tab

1 Answers1