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

它会将活动类添加到第一个li。

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

如何在动态li中为第一个选项卡添加活动类

3 个答案: