title: Set class active in tab-pane of tabbable bootstrap
body: <p>I try to set active a class of a table in bootstrap : <a href="http://twitter.github.io/bootstrap/components.html#navs" rel="nofollow">http://twitter.github.io/bootstrap/components.html#navs</a></p>
  
  <p>I use php and html to show my table but how can i set active some element ?</p>
  
  <pre><code>&lt;div class="tabbable tabs-left"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;?php 
              foreach ($this-&gt;aliasRead as $key =&gt; $value):
                  echo '&lt;li class="active"&gt;&lt;a href="#'.$value[0].'" data-toggle="tab"&gt;'.$value[0].'  
                      &lt;button class="btn btn-danger" &gt;&lt;i class="icon-trash icon-white"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      ';
              endforeach;
          ?&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content"&gt;
  
          &lt;?php foreach ($this-&gt;aliasRead as $key =&gt; $value):
              echo '&lt;div class="tab-pane active" id="'.$value[0].'"&gt;';
          ?&gt;
  
              &lt;H4&gt;Alias redirigé vers l'adresse : 
                  &lt;button href="#modifalias" role="link" data-toggle="modal" class="btn btn-primary"&gt;&lt;i class="icon-plus icon-white"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/H4&gt;
  
              &lt;table class="table table-striped"&gt;
                  &lt;tbody&gt;
                      &lt;?php foreach ($value as $key =&gt; $v):
                          if($key &gt; 0)
                              echo '&lt;tr&gt;
                                  &lt;td&gt;'.$v.'&lt;/td&gt; 
                                  &lt;td&gt;
                                  &lt;button class="btn btn"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;';
                          endforeach;
                      ?&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;  
          &lt;?php endforeach; ?&gt; 
      &lt;/div&gt;               
  &lt;/div&gt;
  </code></pre>
  
  <p>In this exemple, all <strong>tab-pane</strong> are active and all <strong>li</strong> are active, i just want to set class active when i click on a : <strong>li</strong></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>i try that and it's works for the li the class is active when i click on but i try to set active the <strong>class tab-pane</strong> when i clik on a li</p>
  
  <p>I try that, doesn't work.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      $('.nav-tabs li').on('click', function(event) {
          $('.nav-tabs li').removeClass('active'); // remove active class from tabs
          $(this).addClass('active'); // add active class to clicked tab
      });
      $('.nav-tabs li').on('click', function(event) {
          $('.tab-content div').removeClass('active');
          $('.tab-content div').addClass('active');
      });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The probleme is the ligne : </p>
  
  <pre><code>$('.tab-content div').addClass('active');
  </code></pre>
  
  <p>how to select the right tabpanel corresponds to li ?</p>