title: How to add class active for first tab in dynamic li
body: <p>I want to show first tab content after page load. I don't know exact how to add class active for first li and for first content . Here is my code.</p>
  
  <pre><code>            &lt;div class="container"&gt;
             &lt;ul class="nav nav-tabs"&gt;
            &lt;?php foreach($category-&gt;result() as $cate){ ?&gt;
           &lt;li&gt;&lt;a data-toggle="tab"  href="#cat&lt;?php echo $cate-&gt;id; ?&gt;"&gt;&lt;?php                   echo $cate-&gt;category_name; ?&gt;&lt;/a&gt;&lt;/li&gt;
  
           &lt;?php } ?&gt;
              &lt;/ul&gt; 
  
       &lt;div class="tab-content"&gt;
        &lt;?php foreach($category-&gt;result() as $cat){ ?&gt;
          &lt;div id="cat&lt;?php echo $cat-&gt;id; ?&gt;" class="tab-pane fade"&gt;
           &lt;?php
  $catego = $cat-&gt;id;
      $servi = $this-&gt;db-&gt;select('*')-&gt;from('sundaland_services')-&gt;where('service_category_id',$catego )-&gt;get()-&gt;result();
      ?&gt;
    &lt;p&gt;
    &lt;?php foreach($servi as $ser11){ ?&gt;
                    &lt;div class="col-sm-6 col-md-4"&gt;
                  &lt;div class="hovereffect"&gt;
                      &lt;img src="&lt;?php echo base_url(); ?&gt;images/services/original/&lt;?php echo $ser11-&gt;service_image; ?&gt;" alt=""&gt;
                      &lt;div class="overlay"&gt;
  
                          &lt;a class="btn-thm btn-xs" href="&lt;?php echo base_url();?&gt;services/main_services_detail/&lt;?php echo $ser11-&gt;id;?&gt; "&gt;Read more &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
                 &lt;h4 style="font-size: 16px!important;"&gt;&lt;?php echo $ser11-&gt;service_title; ?&gt;&lt;/h4&gt;
                      &lt;p class="details"&gt;&lt;?php echo word_limiter($ser11-&gt;service_description, 15); ?&gt;&lt;/p&gt;
              &lt;/div&gt;
   &lt;?php  }
     ?&gt;
  
     &lt;/p&gt;
         &lt;/div&gt;
         &lt;?php } ?&gt;
  
       &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I want that first tab open by default after page load. How to do this? Is there any need to add javascript for this?</p>