如何在动态li中为第一个选项卡添加类活动 - How to add class active for first tab in dynamic li

How to add class active for first tab in dynamic li

我想在页面加载后显示第一个选项卡内容。我不知道确切的如何添加类活动的第一个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 ?

试试这个:

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

给你:

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

可以通过使用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