Why tab navigation failed and produce error in console

I created few tabs in profile view. I want to activate certain tab from another pag e using button link.

This is my button link"

 <a href="/#keluarga" class="btn btn-warning btn-md">Back</a>

These are the sourcew of javascript in javascript folder in public used:

  <script src="/jquery-1.11.3.min.js"></script>

  <script src="/jquery.dataTables.min.js"></script>
  <script src="/dataTables.buttons.min.js"></script>
  <script src="/buttons.flash.min.js"></script>
  <script src="/jszip.min.js"></script>
  <script src="/pdfmake.min.js"></script>
  <script src="/vfs_fonts.js"></script>
  <script src="/buttons.html5.min.js"></script>
  <script src="/buttons.print.min.js"></script>
  <script src="/buttons.colVis.min.js"></script>
  <script src="/dataTables.select.min.js"></script>
  <script src="/jquery-ui.min.js"></script>
  <script src=""></script>  
  <script src="/bootstrap.min.js"></script>
  <script src="/select2.full.min.js"></script>
  <script src="/main.js"></script>
  <script src=""></script>
  <script src=""> 

These are script in header:

 <link rel="stylesheet"
  href="">
 <link rel="stylesheet"
  href=""/>
 <link rel="stylesheet"
  href=""/>
 <link rel="stylesheet"
  href=""/>
  <link rel="stylesheet"
  href=""/>

                                    <link rel="stylesheet"
  href=""/>
 <script src=""></script>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

 <!-- datatable -->
 <script src="//code.jquery.com/jquery-1.12.3.js"></script>
  <link href="" rel="stylesheet">
  <link rel="stylesheet"
  href="/select2.min.css"/>
  <link href="" rel="stylesheet">
  <link href="" rel="stylesheet">
 <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

When the button is clicked, it goes to the desired page but the the tab is not specified. The error in console Uncaught TypeError: $(...).tab is not a function at 3:2298" statement highlighted is:

 $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');

I have searched through and identified possible cause is because of duplicate jquery source. But when I try delete some, still fail.

My js code is as below:

 <script type="text/javascript">// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
  // Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
</script>

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2EgvwGx
via IFTTT