Selecting First Tab - Laravel - php

Question

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>

Answer 1

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

Answer 2

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