jquery - 为什么选项卡导航失败并在控制台中产生错误

Question

我在配置文件视图中创建了几个选项卡。我想使用按钮链接从另一个页面激活某些选项卡。

这是我的按钮链接”

 <a href="{{ url('view_profil')}}/{{$valueItemregistrationkeluarga->ItemRegistrationID}}#keluarga" class="btn btn-warning btn-md">Back</a>

这些是公共使用的 javascript 文件夹中的 javascript 的来源：

  <script src="{{ url('javascript') }}/jquery-1.11.3.min.js"></script>

  <script src="{{ url('javascript') }}/jquery.dataTables.min.js"></script>
  <script src="{{ url('javascript') }}/dataTables.buttons.min.js"></script>
  <script src="{{ url('javascript') }}/buttons.flash.min.js"></script>
  <script src="{{ url('javascript') }}/jszip.min.js"></script>
  <script src="{{ url('javascript') }}/pdfmake.min.js"></script>
  <script src="{{ url('javascript') }}/vfs_fonts.js"></script>
  <script src="{{ url('javascript') }}/buttons.html5.min.js"></script>
  <script src="{{ url('javascript') }}/buttons.print.min.js"></script>
  <script src="{{ url('javascript') }}/buttons.colVis.min.js"></script>
  <script src="{{ url('javascript') }}/dataTables.select.min.js"></script>
  <script src="{{ url('javascript') }}/jquery-ui.min.js"></script>
  <script src="{{ asset('javascript/custom.js') }}"></script>  
  <script src="{{ url('adminlte/js') }}/bootstrap.min.js"></script>
  <script src="{{ url('adminlte/js') }}/select2.full.min.js"></script>
  <script src="{{ url('adminlte/js') }}/main.js"></script>
  <script src="{{ url('adminlte/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
  <script src="{{ url('adminlte/plugins/fastclick/fastclick.js') }}"> 

这些是标题中的脚本：

 <link rel="stylesheet"
  href="{{ asset('jquery/jquery-ui.css') }}">
 <link rel="stylesheet"
  href="{{ asset('jquery/jquery.dataTables.min.css') }}"/>
 <link rel="stylesheet"
  href="{{ asset('jquery/select.dataTables.min.css') }}"/>
 <link rel="stylesheet"
  href="{{ asset('jquery/buttons.dataTables.min.css') }}"/>
  <link rel="stylesheet"
  href="{{ asset('jquery/jquery-ui-timepicker-addon.min.css') }}"/>

                                    <link rel="stylesheet"
  href="{{ asset('jquery/bootstrap-datepicker.standalone.min.css') }}"/>
 <script src="{{ asset('javascript/jquery.min.js') }}"></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="{{ asset('adminlte/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <link rel="stylesheet"
  href="{{ asset('adminlte/css') }}/select2.min.css"/>
  <link href="{{ asset('adminlte/css/AdminLTE.min.css') }}" rel="stylesheet">
  <link href="{{ asset('adminlte/css/skins/skin-blue.min.css') }}" 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>

单击按钮时，它将转到所需的页面，但未指定选项卡。控制台中的错误 Uncaught TypeError: $(...).tab is not a function at 3:2298" 突出显示的语句是：

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

我已经搜索并确定了可能的原因是由于重复的 jquery 源。但是当我尝试删除一些时，仍然失败。

我的js代码如下：

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

标签： jquerylaravel-5tabs