How to get the link from a specific bootstrap tab

Question

I have a page that uses the Tabs navs of bootstrap 4.1, I’m looking and I can’t find a solution, I want to make sure that by clicking on a link it opens a specific 'tab' of the bootstrap. In this example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#">Profile</a>
<br />
<br />
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Perfil</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Contato</div>
</div>

by clicking on the link <a href="#">Profile</a> he go to the Profile tab. Because I want to redirect to a certain URL with PHP, index.php?id=2#nav-profile, but if I call it straight like this it does not go to this second tab and it is in the first #home.

Answer 1

You can use

<a href="#" onclick="document.getElementById('nav-profile-tab').click()">Profile</a>

I’m not sure if there is an option with pure HTML, that’s a Javascript output.