Как добавить класс для первой вкладки в динамическом li

Question

Я хочу показать содержимое первой вкладки после загрузки страницы. Я не знаю, как добавить класс для первого ли и для первого контента. Вот мой код.

  <div class="container"> 
      <ul class="nav nav-tabs"> 
      <?php foreach($category->result() as $cate){ ?> 
     <li><a data-toggle="tab" href="#cat<?php echo $cate->id; ?>"><?php     echo $cate->category_name; ?></a></li> 

     <?php } ?> 
      </ul> 

    <div class="tab-content"> 
     <?php foreach($category->result() as $cat){ ?> 
     <div id="cat<?php echo $cat->id; ?>" class="tab-pane fade"> 
     <?php 
$catego = $cat->id; 
    $servi = $this->db->select('*')->from('sundaland_services')->where('service_category_id',$catego)->get()->result(); 
    ?> 
    <p> 
    <?php foreach($servi as $ser11){ ?> 
        <div class="col-sm-6 col-md-4"> 
       <div class="hovereffect"> 
        <img src="<?php echo base_url(); ?>images/services/original/<?php echo $ser11->service_image; ?>" alt=""> 
        <div class="overlay"> 

         <a class="btn-thm btn-xs" href="<?php echo base_url();?>services/main_services_detail/<?php echo $ser11->id;?> ">Read more <i class="fa fa-arrow-circle-right"></i></a> 

        </div> 
       </div> 
       <div class="clearfix"></div> 

       <h4 style="font-size: 16px!important;"><?php echo $ser11->service_title; ?></h4> 
        <p class="details"><?php echo word_limiter($ser11->service_description, 15); ?></p> 
      </div> 
<?php } 
    ?> 

    </p> 
     </div> 
     <?php } ?> 

    </div> 
     </div> 

Я хочу, чтобы первая вкладка открыта по умолчанию после загрузки страницы. Как это сделать? Есть ли необходимость добавить javascript для этого?

Answer 1

Попробуйте это:

$('li').first().addClass('active'); 

Это добавит активный класс к первому ли.

Answer 2

Здесь вы идете:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".nav-tabs li:first").addClass("active"); 
}); 
</script> 

Надеется, что это будет работать.

Answer 3

Вы можете достичь этого, используя класс document.ready. Мой код, когда я нажимаю кнопку меню, открывает меню. Я скопировала эту функцию мыши и поместите его в document.ready сфере так, когда документ будет готов, загруженное меню открывается автоматически:

$(document).ready(function() { 
    $(".menu-button").click(function() { 
     if ($(".menu-button").hasClass("active")) { 
      $(".menu-button").removeClass("active"); 
      $(".menu-items").addClass("hide"); 
     } else { 
      $(".menu-button").addClass("active"); 
      $(".menu-items").removeClass("hide"); 
     } 
    }); 

    $(".menu-button").click(); 

}); // scope of document.ready