![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
Advertisements