title: Boostrap tab panel works only once
body: <p>i use a tab panel with bootstrap framework.
  It works fine... the first time i click on a link.
  After that, the panel content doesnt' change , and the class 'active' is not added to the appropriate element</p>
  
  <p>here my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: #000;"&gt; 
   &lt;div class="container"&gt; 
  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;ul class="nav navbar-nav navbar-left"&gt;
      &lt;li class="hidden"&gt;
        &lt;a href="#page-top"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="dropup" id="menu"&gt;
          &lt;button class="btn dropdown-toggle" type="button"             data-toggle="dropdown" style="padding-top: 15px;             padding-bottom: 15px; background-color: #000;               color:#fff; border: none;font-family:               Montserrat;"&gt;HOME
            &lt;span class="caret"&gt;&lt;/span&gt;
         &lt;/button&gt;
       &lt;ul class="dropdown-menu nav nav-tabs"&gt;
            &lt;li&gt;&lt;a href="#origine" data-toggle="tab" role="tab"&gt;Notre origine&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#volonte" data-toggle="tab" role="tab"&gt;Notre volonté&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#website" data-toggle="tab" role="tab"&gt;Notre site&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#securite" data-toggle="tab" role="tab"&gt;Notre sécurité&lt;/a&gt;&lt;/li&gt;            
            &lt;li&gt;&lt;a href="#groupe" data-toggle="tab" role="tab"&gt;Notre groupe&lt;/a&gt;&lt;/li&gt;            
            &lt;li&gt;&lt;a href="#realisations" data-toggle="tab" role="tab"&gt;Nos réalisations&lt;/a&gt;&lt;/li&gt;
               
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a class="page-scroll" href="#connexion" style="color:#fff;" data-toggle="modal" data-target="#connexion"&gt;Connexion&lt;/a&gt;
       &lt;/li&gt;
     &lt;li&gt;
       &lt;a class="page-scroll" href="#portfolio" style="color:#fff;"&gt;Actualités&lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a class="page-scroll" href="#contact" style="color:#fff;" data-toggle="modal" data-target="#contact"&gt;Contact&lt;/a&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
    &lt;div class="tab-content navbar-fixed-bottom" style="background-color:#000; color:#fff;opacity:0.8; width: 60%; margin: auto; bottom:20%;"&gt;
   &lt;div id="origine" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
      &lt;h2&gt;Notre origine&lt;/h2&gt;
      ertyrtyty
   &lt;/div&gt;
   &lt;div id="volonte" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
      &lt;h2&gt;Notre volonté&lt;/h2&gt;    
      dfghdfghdfghgh
   &lt;/div&gt;
   &lt;div id="website" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
      &lt;h2&gt;Notre site&lt;/h2&gt;
      dfghgfhdgfh
   &lt;/div&gt;
   &lt;div id="securite" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
    &lt;h2&gt;Notre sécurité&lt;/h2&gt;
      securite
   &lt;/div&gt;
   &lt;div id="groupe" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
    &lt;h2&gt;Nos valeurs ajoutées&lt;/h2&gt;    .
      gfdhfghfgh
   &lt;/div&gt;
   &lt;div id="realisations" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"&gt;
    &lt;h2&gt;Nos réalisations&lt;/h2&gt;
      realsiations
   &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've search the subject but did not found any solution</p>