Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
Bootstrap hide.bs.tab event
The hide.bs.tab fires when the tab is about to be hidden in Bootstrap.
Fire the hide.bs.tab and generate the alert before the modal is hidden −
$('.nav-tabs a').on('hide.bs.tab', function(e){
alert('Previous tab will hide now!');
});
The first tab is the active tab and fade in property is also set −
<div id="home" class="tab-pane fade in active"> <h3>Home</h3> <p>This is demo text!</p> </div>
You can try to run the following code to implement the hide.bs.tab event −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Web Dev</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#two">PHP</a></li>
<li><a href="#three">C#.NET</a></li>
<li><a href="#four">Ruby</a></li>
<li><a href="#five">HTML5</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Home</h3>
<p>This is demo text!</p>
</div>
<div id="two" class="tab-pane fade">
<h3>PHP</h3>
<p>This is demo text!</p>
</div>
<div id="three" class="tab-pane fade">
<h3>C#.NET</h3>
<p>This is demo text!</p>
</div>
<div id="four" class="tab-pane fade">
<h3>Ruby</h3>
<p>This is demo text!</p>
</div>
<div id="five" class="tab-pane fade">
<h3>HTML5</h3>
<p>This is demo text!</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('show.bs.tab', function(){
alert('New tab will be visible now!');
});
$('.nav-tabs a').on('shown.bs.tab', function(){
alert('New tab is now visible!');
});
$('.nav-tabs a').on('hide.bs.tab', function(e){
alert('Previous tab will hide now!');
});
$('.nav-tabs a').on('hidden.bs.tab', function(){
alert('Previous Tab is hidden now!');
});
});
</script>
</body>
</html> 
Updated on: 2020-06-17T14:34:43+05:30
1K+ Views
Advertisements