Open Specific Tab of Bootstrap Tab Panel on Click Here Link

Question

Is there a way I can click on a link and to open a specific bootstrap tab on the same page?

Here is my code:

<ul class="nav nav-tabs">
    <li class="active"><a  href="#1" data-toggle="tab">BMR Calculator</a></li>
    <li><a href="#3" data-toggle="tab">Body Fat Calculator</a></li>
    <li><a href="#4" data-toggle="tab">Heart Calculator</a></li>
    <li><a href="#5" data-toggle="tab">BMI Calculator</a></li>
</ul>

Don't know fat percentage, please <a href="#3">click here</a>

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) — Aswin Ramesh, Feb 12 '18 at 06:29
please be advised that `id` in HTML must not start with a number — pwolaq, Feb 12 '18 at 07:04

Muhammad Tarique · Accepted Answer · 2018-02-12T07:11:35.913

0

Just make your additional link like below -

Don't know fat percentage, please <a href="#three" data-toggle="tab">click here</a>

Except the fact that you cannot use numeric values as ID of an element, Please refer HTML 5

edited Feb 12 '18 at 07:11

answered Feb 12 '18 at 06:30

Muhammad Tarique

1,407
1
13
17

score 0 · Answer 2 · answered Feb 12 '18 at 06:34

Add <a data-toggle="tab" href="#3">click here</a> data-toggle="tab" in your link to open tab.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active"><a  href="#1" data-toggle="tab">BMR Calculator</a></li>
<li><a href="#3" data-toggle="tab">Body Fat Calculator</a></li>
<li><a href="#4" data-toggle="tab">Heart Calculator</a></li>
<li><a href="#5" data-toggle="tab">BMI Calculator</a></li>
</ul>
  <div id="1" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="3" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="4" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
    <div id="5" class="tab-pane fade">
    <h3>Menu 5</h3>
    <p>Some content in menu 2.</p>
  </div>
Don't know fat percentage, please <a  data-toggle="tab" fa href="#3">click here</a>

Open Specific Tab of Bootstrap Tab Panel on Click Here Link

2 Answers2