Question

我在view_profil页面上有一个选项卡列表：

 <div class="panel panel-default">
<ul class="nav nav-pills" id="mytab">
  <li class="active"><a data-toggle="tab" href="#profil">Profil</a></li>
  <li><a id="keluarga-tab" data-toggle="tab" href="#keluarga">Keluarga</a></li>
  <li><a id="kursus-tab" data-toggle="tab" href="#kursus">Kursus</a></li>
  <li><a id="akademik-tab" data-toggle="tab" href="#akademik">Akademik</a></li>
  <li><a id="anugerah-tab" data-toggle="tab" href="#anugerah">Anugerah</a></li>
</ul>

我想将其他页面上的按钮链接到此页面，但直接引用“ keluarga”标签。

我将此代码用于按钮：

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

我曾尝试使用一些jquery代码和javascript，但是失败了。.为此目的正确的javascript / jquery是什么？

这是使用的jQuery；

<script>
var hash = document.location.hash;
if (hash) {
$('.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>

我尝试了不使用标签的解决方案：

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

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

我也尝试了以下代码：

Try1：

    // 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;
  })

尝试2： var openTab = $（location.hash）.filter（“。tab_content”）;

 if(openTab.length){
 $("a[href='"+location.hash+"']").click();
 }

尝试3：

 <script type="text/javascript">
 (function activateTabFromHash() { if (location.hash) { var tabLink = document.querySelector('a[href="' + location.hash + '"]'); if (!tabLink) { return false; } tabLink.click(); if (location.hash) {
  setTimeout(function() {
  window.scrollTo(0, 0);
  }, 1);
  } } })();
  </script>

我正在为此应用程序使用laravel 5。

该按钮可以链接到页面，但不会激活指定的标签。

Answer 1

jQuery似乎期望href的值用引号（""）引起来，例如href="#keluarga"。

当前，如果选择$('.nav-tabs a[href='+hash+']')，则选择选项卡（'.nav-tabs a[href=#keluarga]）的部分将产生hash='#keluarga'。 jQuery引发语法异常，因为=符号后接#而不是"。

因此，请确保hash的值用引号引起来。您可以将代码的这一部分更改为：$('.nav-tabs a[href="'+hash+'"]')。

如何链接到Laravel中的其他页面选项卡？

1 个答案: