javascript - 如何在 laravel javascript 中设置默认事件选项卡？

Question

我如何才能激活并选择我的第一个选项卡，因为当我加载页面时，没有一个选项卡被选中并处于事件状态。

这是页面加载时的选项卡

这是点击标签后的

html

                     <div class="tabbable-line ">

                        <!-- Nav Nav-tabs Start -->
                        <ul class="nav nav-tabs tabs_content">
                            @foreach ($routes as $route)
                                <li  >
                                    <a href="#{{ $route->id }}" id="ad" data-toggle="tab">
                                        {!! $route->name !!}
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                        <div class="tab-content blog_tabs">
                            <!-- tab-content is coming from javascript -->
                        </div>
                   </div>

nav-content 使用 JavaScript，因为选择选项卡时会有来自 Controller 的数据，所以这里是...

导航内容Javascript

$("ul.nav-tabs > li > a").click(function() {
        var id = $(this).attr("href").replace("#", "");
        console.log(id);

        if(id) {
            $.ajax({
                url: "{{ route('user.schedule.getId') }}",
                type: "GET",
                data:{'id':id},
                dataType: "json",
                success:function(data) {
                    $(".tab-content").empty();
                    $(".tab-content").html('<div class="tab-pane" name="schedule" id="'+ id +'">')
                    $.each( data, function( index, object ) {
                        $(".tab-content").append('<ul class="list-group"><li class="list-group-item">'+ object['schedule_number'] +'</li></ul></div>');

                    });

                }
            });
        }    
  });

Answer 1

在 foreach 循环中，为数组中的第一项添加一个 active 类:

<ul class="nav nav-tabs tabs_content">
   @foreach ($routes as $index => $route)
      <li {{ $index== 0 ? 'class="active"' : '' }}>
         <a href="#{{ $route->id }}" id="ad{{ $route->id }}" data-toggle="tab">
            {!! $route->name !!}
         </a>
      </li>
   @endforeach
</ul>

添加请注意，id 在您的文档中必须是唯一的。