Hi Guys,
Now, let's see tutorial of bootstrap 4 tab deep link. We will look at example of bootstrap 4 nav tabs link to tab.
In this article, we will implement a how to add deep linking to the bootstrap 4 tabs component. i would like to share with you bootstrap 4 add deep linking to the tab component.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" target="_blank" rel="nofollow" >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" target="_blank" rel="nofollow" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- custom CSS -->
<link rel="stylesheet" href="css/main.css" target="_blank" rel="nofollow" >
<title>How to Add Deep Linking to the Bootstrap 4 Tabs Component</title>
</head>
<body>
<!-- content here -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- custom JS -->
<script src="js/main.js"></script>
<ul class="nav nav-mytabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" target="_blank" rel="nofollow" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="history-tab" data-toggle="tab" href="#history" target="_blank" rel="nofollow" role="tab" aria-controls="history" aria-selected="false">History</a>
</li>
<li class="nav-item">
<a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractions" target="_blank" rel="nofollow" role="tab" aria-controls="city-attractions" aria-selected="false">City Attractions</a>
</li>
</ul>
<div class="tab-content mytab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<!-- content here -->
</div>
<div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
<!-- content here -->
</div>
<div class="tab-pane fade" id="city-attractions" role="tabpanel" aria-labelledby="city-attractions-tab">
<!-- content here -->
</div>
</div>
<script type="text/javascript">
$(document).ready(() => {
let url = location.href.replace(/\/$/, "");
if (location.hash) {
const hash = url.split("#");
$('#myTab a[href="#" target="_blank" rel="nofollow" +hash[1]+'"]').tab("show");
url = location.href.replace(/\/#/, "#");
history.replaceState(null, null, url);
setTimeout(() => {
$(window).scrollTop(0);
}, 400);
}
$('a[data-toggle="tab"]').on("click", function() {
let newUrl;
const hash = $(this).attr("href");
if(hash == "#home") {
newUrl = url.split("#")[0];
} else {
newUrl = url.split("#")[0] + hash;
}
newUrl += "/";
history.replaceState(null, null, newUrl);
});
});
</script>
</body>
</html>
It will help you...
