CODEWITHSUNDEEP
phplaravel
pogba
pogba

Reputation: 131

Selecting First Tab - Laravel

i want to have my first tab selected when page loads or refreshes. In my code, the content of the first tab shows alright but the tab doesn't show it is selected although its content is showing.

Why is this happening please?

<input type="hidden" name="currentTab" value="0"/> 

<div class="row">
        <div class="col-md-9">

          <div  class="nav-tabs-custom"  id="tabs">

            <ul class="nav nav-tabs">
            @foreach($students as $student)

               <li ><a href="#tab_{{ $student->id }}" data-toggle="tab" >{!!$student->name!!}</a></li>
               @endforeach


            </ul>
            <div class="tab-content">
            @foreach($stduents as $key => $student)

            <div class="tab-pane" id="tab_{{ $student->id }}">
                 //content
             </div>
            @endforeach     
              </div>    

            </div>

          </div>

        </div>

<script>

$( document ).ready(function() {

    $("#tabs").tabs({active: document.tabTest.currentTab.value});

            $('#tabs a').click(function(e) {
                var curTab = $('.ui-tabs-active');
                curTabIndex = curTab.index();
                document.tabTest.currentTab.value = curTabIndex;
            });
})
</script>

Upvotes: 0

Views: 817

Answers (2)

Sapnesh Naik
Sapnesh Naik

Reputation: 11636

I see that an active class is not being set on page load to the first nav list element.
This should set the active class to first list element.

  @foreach($students as $key => $student)
     <li {{ $key == 0 ? 'class="active"' : '' }}><a href="#tab_{{ $student->id }}" data-toggle="tab" >
        {!!$student->name!!}</a></li>
  @endforeach

Upvotes: 2

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Here is a jQuery solution for that:

$(document).ready(function(){
    $('.nav-tabs').find('li > a:first').click(); // **
})

** This will activate the first tab when page loads or refreshes.

If you want to do a quick test, just select any other tab than 1st tab, and execute this line in your browser's console $('.nav-tabs').find('li > a:first').click();

Upvotes: 2

Related Questions