Как связать кнопку с вкладкой на другой странице?

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-ссылки .

Возможно, так?

$('.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+'"]'), чтобы проверить, что является возвращаемым значением и возвращает ли он какой-либо элемент.

Обновление Похоже, вы не включили bootstrap.js в свой html-справочник. Пожалуйста, добавьте это как

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