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;
})
Twitter Bootstrap Tabs: Open Specific Tab
You can create a function that adds the active class when a hash exists on page load. Include it in your top script section like so:
$(function () {
var hashTab = window.location.hash;
if (hashTab != '') {
$('.nav-tabs a[href="' + hashTab + '"]').tab('show');
$(hashTab).addClass('active');
}
});
How to link to specific tab on other page using Bootstrap3 tabs?
I've tested your example and it works perfectly with one little error. You forgot to put a " in <div class="tab-content>
and because of that your example is not working.
Here is the complete working example:
<!DOCTYPE html>
<html>
<head>
<title>DEMO</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#address" data-toggle="tab">Address</a></li>
<li><a href="#favorites" data-toggle="tab">Favorites</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="profile">
Profile
</div>
<div class="tab-pane fade" id="address">
Adress
</div>
<div class="tab-pane fade" id="favorites">
Favorites
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function(e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
</body>
</html>
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/
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>
Bootstrap 4 - redirect to a specific tab
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>
Go to Specific Tab on Page Reload or Hyperlink where tab is loaded by AJAX
The only way to go to the last tab that has the focus, is to store a reference (using cookies or local storage).
This code uses local storage to store the href value of the focused tab and later retrieve it.
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('focustab', $(e.target).attr('href'));
});
var focustab = localStorage.getItem('focustab');
if (focustab) {
$('[href="' + focustab + '"]').tab('show');
}
});
Related Topics
Capture Key Press (Or Keydown) Event on Div Element
Calling a JavaScript Function in Another Js File
Do You Need Text/JavaScript Specified in Your ≪Script≫ Tags
"Uncaught Typeerror: Illegal Invocation" in Chrome
Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts
Submit Form Without Page Reloading
How to Call PHP Functions by JavaScript
How to Bypass Access-Control-Allow-Origin
Execute PHP Function With Onclick
How to Render an 'Atmosphere' Over a Rendering of the Earth in Three.Js
What Browsers Support Html5 Websocket API
How to Calculate the Number of Days Between Two Dates
Insert HTML With React Variable Statements (Jsx)
Programmatically Change the Src of an Img Tag
How to Move an Element into Another Element
How to Programmatically Set the Value of a Select Box Element Using JavaScript