- 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 hidden.bs.tab event
The hidden.bs.tab event fires when the tab is completely hidden in Bootstrap.
Firsty, show the modal using show method as in the following code snippet −
$(“.nav-tabs a”).click(function(){ $(this).tab('show'); });
The hidden.bs.tab event fires and an alert generates after the tab hides −
$(‘.nav-tabs a’).on(‘hidden.bs.tab’, function() { alert('Previous Tab is hidden now!'); });
You can try to run the following code to implement the hidden.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
To Continue Learning Please Login
Login with Google