How to Add Deep Linking to the Bootstrap 4 Tabs Component

Bootstrap 4

Nicesnippets

4828

17-03-2020


How to Add Deep Linking to the Bootstrap 4 Tabs Component

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">

<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" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- custom CSS -->

<link rel="stylesheet" href="css/main.css">

<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" 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" 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" 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="#'+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...


Recommended Posts