Syntax error Bootstrap hide.bs.tab event

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

Live Demo

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

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements