javascript - 如何在动态 li 中为第一个选项卡添加事件类

Question

我想在页面加载后显示第一个选项卡内容。我不知道如何为 first li 和 first content 添加 active 类。这是我的代码。

            <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');

它将在第一行添加事件类。