Question

我有一个选项卡列表。以下是keluarga标签的示例。

<div class="panel panel-default">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#profil">Profil</a></li>
  <li><a data-toggle="tab" href="#keluarga">Keluarga</a></li>
</ul>
//other codes here..
</div>

我想使用该按钮将另一个页面上的按钮链接到keluarga标签，而不是个人资料标签。

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

单击按钮时，我在此处使用javascript激活keluarga标签。

 <script>

// Javascript to enable link to tab
 var hash = document.location.hash;
   if (hash) {
     $('.nav nav-tabs a[href="'+hash+'"]').tab('show');
    } 

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

但是，它在控制台中给出了错误：

 1288:2276 Uncaught TypeError: $(...).tab is not a function

显示这一行代码是问题：

 $('.nav nav-tabs a[href="'+hash+'"]').tab('show');

我检查了我的jquery冗余并尝试消除任何冗余，但仍然无法避免该错误。

这是我标题中的jquery列表：

    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{{ asset('css/ionicons.min.css') }}">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"> 
    </script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> 
    </script>
    <![endif]-->
    <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>   -->


<!-- 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>
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">

在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') }}"></script>
<script src="{{ url('adminlte/js/app.min.js') }}"></script>

<script>
window._token = '{{ csrf_token() }}';
</script>

 @yield('javascript')

我也尝试了其他脚本，但是出现相同的错误。

为什么脚本不起作用？它将按钮链接到页面，但链接到配置文件选项卡（活动的默认页面）。它不会直接链接到keluarga标签

此控制台日志：

  <script>  
 // Javascript to enable link to tab
 console.log($('.nav.nav-tabs a[href="#keluarga"]'));

 var hash = document.location.hash;
 if (hash) {
  $('.nav.nav-tabs a[href="'+hash+'"]').tab('show');

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

它返回：

jQuery.fn.init [a, prevObject: jQuery.fn.init(1), context: document, selector: ".nav.nav-tabs a[href="#keluarga"]"]
 0: a
 context: document
 length: 1
 prevObject: jQuery.fn.init [document, context: document]
 selector: ".nav.nav-tabs a[href="#keluarga"]"
 __proto__: Object(0)

Answer 1

<罢工> 假设您使用的是jquery-ui，似乎功能/方法名称应该是tabs而不是tab，请从api reference进行检查。

也许是这样吗？

$('.nav nav-tabs a[href="'+hash+'"]').tabs('show');

或

$('.nav nav-tabs a[href="'+hash+'"]').tabs({ show:true });

让我知道它是否有效

好吧，看来您只是在使用Bootstrap data-toggle="tab"，而只是使用jQuery激活它。在选择器中，您确定它是正确的吗？看来类nav和nav-tabs处于同一级别，也许选择器应该像这样

 $('.nav.nav-tabs a[href="'+hash+'"]').tab('show');

还要尝试console.log $('.nav.nav-tabs a[href="'+hash+'"]')来检查返回的值以及它是否返回任何元素。

更新：您似乎没有在HTML参考中包含bootstrap.js。请这样添加

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

<!-- add bootstrap.min.js cdn -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

 <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"> 
</script>
...

如何将按钮链接到其他页面的选项卡？

1 个答案: