Make Bootstrap tab Active on the bases of URL link
Making a Bootstrap Tab Active Based on URL Link
To make a Bootstrap tab active based on a URL link, you can use JavaScript to manipulate the Bootstrap tab's data-toggle and data-target attributes. Here's an example of how you can achieve this:
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade">
<h3>Tab 1 Content</h3>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2 Content</h3>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3 Content</h3>
</div>
</div>
<!-- Include Bootstrap JS and your custom script -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Get the URL hash
var hash = window.location.hash;
// Check if the hash exists and corresponds to a tab
if (hash && $('.nav-link[href="' + hash + '"]').length) {
// Activate the tab
$('.nav-link[href="' + hash + '"]').tab('show');
}
</script>
</body>
</html>
In this example, we have a Bootstrap nav with three tabs (Tab 1, Tab 2, and Tab 3). The JavaScript code checks if there is a hash in the URL and if it matches the href of any of the tab links. If a match is found, it activates the corresponding tab using the .tab('show') method.
Remember to include the Bootstrap CSS and JavaScript files in your HTML file for the tabs to work properly.
I hope this helps! Let me know if you have any further questions.