0

How i can i get my first tab active and selected, because because when i load my page none of my tabs selected and active.

this is the Tabs when the page loaded

enter image description here

and this is after clicking the tab

enter image description here

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 are in javascript because there's data coming from controller when ever tab is selected, so here is...

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

                    });

                }
            });
        }    
  });

1 Answer 1

1

Inside your foreach loop, add a class active for the first item in your array:

<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>

Add please notice that id have to be unique in your document.

8
  • thansk for your answer, but it's the same error no default tab
    – Lafoune
    Jul 23, 2019 at 14:37
  • I forgot the dollar sign for the index variable--> @foreach ($routes as $index => $route) or you can try this syntax : <li @if($index== 0) class="active" @endif> Jul 24, 2019 at 9:25
  • the nav-tab is active but there's not content... i mean the first tab is active but it's content is not active, and thanks for that
    – Lafoune
    Jul 24, 2019 at 14:37
  • try to add this line $(document).$("ul.nav-tabs > li:first > a").trigger( "click" ); under the $("ul.nav-tabs > li > a").click(function() { ... }) snippet ..like this you are triggering a click event for the first element in your list to get its content generated. Jul 25, 2019 at 13:36
  • javascript error is coming out Uncaught TypeError: $(...).$ is not a function... is this a normal ? `
    – Lafoune
    Jul 25, 2019 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.