title: Cancel the show event of bootstrap tabs
body: <p>I am using bootstrap tabs, and I use the <code>shown</code> event to detect the tab change, in a scenario I want to cancel this shown even so I used the <code>preventDefault()</code> function as following :</p>
  <pre><code>$('a[data-toggle=&quot;tab&quot;]').on('shown.bs.tab', function (e) {
      var target = $(e.target).attr(&quot;href&quot;) // activated tab
      if(target === '#mise-en-page' || target === '#widgets'){
          if($('.page-name-input').length &gt; 0){
              var nonEmpty = $('.page-name-input').filter(function(){
                  return this.value != '';
              });
              if(nonEmpty.length==0){
                  e.preventDefault();
                  console.log('Error !!');
              }else{
                  console.log('OK');
              }
          }else{
              console.log('OK');
          }
      };
    });
  </code></pre>
  <p>In this case the <code>preventDefault()</code> function didn't work and I still can navigate between tabs even if I had the <code>'Error !!'</code> message printed on my console.</p>
  <p>How can I solve this ?</p>
  <h1>Edit :</h1>
  <p>This is a jsfiddle where the <code>preventDefault()</code> doesn't work with the shown event.</p>
  <p><a href="http://jsfiddle.net/xFW8t/2426/" rel="nofollow noreferrer">http://jsfiddle.net/xFW8t/2426/</a></p>