How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
Applying a selector from the .nav-tabs seems to be working
HTML is
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Script is
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
http://jsfiddle.net/pThn6/80/
Open Specific Tab of Bootstrap Tab Panel on Click Here Link
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
How to open a tab from external link?
There are two approaches I can think of to solve this issue:
- As Bootstrap 4 does not use the url
#hashes for tab navigation, a simple javascript can listen to click events on regular links and trigger additional clicks –under the hood– on the corresponding tabs. - Use url
#hashes and open tabs based on the change of that value. This approach also have the advantage that the tabs will be directly linkable, so you could use e.g. example.com#sign-up to open a page with a specific tab opened.
Below you will find two snippets for each approach.
1. Under the hood clicks:
$('.tab-link').on('click', function(event) { // Prevent url change event.preventDefault(); // `this` is the clicked <a> tag $('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');})<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="log-in-tab" data-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a> </li> <li class="nav-item"> <a class="nav-link" id="forgot-password-tab" data-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a> </li> <li class="nav-item"> <a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a> </li></ul>
<div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab"> Login tab<br /> <a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a> </div> <div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab"> Forgt password tab </div>
<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab"> Sign-up tab </div></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Link to specific tab Bootstrap
Following code works for me
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-md-12" style="margin: 0 auto;">
<section class="panel">
<header class="panel-heading tab-bg-dark-navy-blue">
<ul class="nav nav-tabs nav-justified ">
<li class="active">
<a data-toggle="tab" href="#overview">
{% trans "Overview" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#timeline">
{% trans "Timeline" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#users_rating">
{% trans "Users Ratings" %} ({{ ptc.userrating.count }})
</a>
</li>
<li class="">
<a data-toggle="tab" href="#rating">
{% trans "Our Rating" %}
</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content tasi-tab">
<!-- Overview Tab-Pane -->
<div id="overview" class="tab-pane active">
{% include 'overview.html' %}
</div>
<!-- Timeline Tab-Pane -->
<div id="timeline" class="tab-pane">
{% include 'timeline.html' %}
</div>
<!-- User Rating Tab-Pane -->
<div id="users_rating" class="tab-pane">
{% include 'users_rating.html' %}
</div>
<!-- Our Rating Tab-Pane -->
<div id="rating" class="tab-pane">
{% include 'rating.html' %}
</div>
</div>
</div>
</section>
</div>
</body>
</html>
JS
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
Here is my solution to the problem, a bit late perhaps. But it could maybe help others:
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
Navbar link to specific bootstrap tab without opening new window or tab?
I think this is what you are looking for.
It doesn't account for a variable amount of tabs, but it does the job for 2 tabs.
$(document).ready(function(){ $tab1 = $('#tab1'); $tab2 = $('#tab2'); $tablink1 = $('#link_tab1'); $tablink2 = $('#link_tab2'); $('#link_tab1 a').on('click', function(){ $tablink1.addClass("active"); $tab1.addClass("active"); $tab2.removeClass("active"); $tablink2.removeClass("active"); }); $('#link_tab2 a').on('click', function(){ $tablink2.addClass("active"); $tab2.addClass("active"); $tab1.removeClass("active"); $tablink1.removeClass("active"); });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><ul class="nav nav-tabs" id="myTabs"> <li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> <li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li></ul>
<div class="tab-content"> <div id="tab1" class="tab-pane fade active in"> <h3>Tab 1</h3> <p>Some content.</p> </div> <div id="tab2" class="tab-pane fade in"> <h3>Tab 2</h3> <p>Some content in Tab 2.</p> </div></div>Related Topics
Keep Input Value After Refresh Page
Scale Element Proportional to Background Cover with Jquery
How to Change Only Text Node in Element
JavaScript - Dynamically Assign Onclick Event in the Loop
Uncaught Referenceerror: $ Is Not Defined Error in Jquery
Fade Background Image in and Out with Jquery
JavaScript - .Innerhtml Changes Auto Close Tags
Dynamically Populating Drop Down List from Selection of Another Drop Down Value
Session Only Cookies with JavaScript
Reformat String Containing Date with JavaScript
How to Develop Desktop Apps Using HTML/Css/Javascript
Replace a Regex Capture Group with Uppercase in JavaScript
How to Draw Polygons on an HTML5 Canvas
Set Cursor at a Length of 14 Onfocus of a Textbox
Regex to Check Whether a String Contains Only Numbers
How to Test If a Variable Does Not Equal Either of Two Values