ダイナミックliの最初のタブでアクティブなクラスを追加する方法

Question

ページの読み込み後に最初のタブの内容を表示したい。私は、最初のliと最初のコンテンツに対してアクティブなクラスを追加する正確な方法を知らない。ここに私のコードです。

  <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