How to add class active for first tab in dynamic li
<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>