转到 Bootstrap 选项卡内的锚文本

Question

我正在尝试创建一个 URL 链接，用于在特定元素（表单）处打开特定页面。

但是该元素位于该页面上的引导选项卡内。

要打开正确的选项卡，我遵循了此 javascript Twitter Bootstrap 选项卡：转到页面重新加载或超链接上的特定选项卡

由于我现在 URL 中的选项卡有一个 # 标签，我似乎无法找到如何添加第二个标签或元素引用。

关于如何打开第二个选项卡内表单的页面有什么想法吗？

我的标签：

<div class="col-md-12">
     <ul class=" nav-tabs nav">
         <li id="tab-1" class="active nav-tab nil-tick ">
             <a href="#stays" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> a</span> Stay </a>
         </li>
         <li id="tab-2" class="nil-tick">
             <a href="#experiences" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> an</span> Experience </a>
         </li>
         <li id="tab-3" class="nil-tick">
             <a href="#other" style="color:unset" data-toggle="tab" aria-expanded="false"> Other </a>
         </li>
     </ul>
 </div>

以及我希望链接到的部分

<form class="subscribe_form" method="POST" style="background:white" id="experience-application-form" autocomplete="off">

还有 javascript

  // Javascript to enable link to tab
  var hash = document.location.hash;

  var prefix = "tab-";
  if (hash) {
      $('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
  }

  // Change hash for page-reload
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
      window.location.hash = e.target.hash.replace("#", "#" + prefix);
  });

Answer 1

您需要在锚点 (

tab('show')

) 元素上调用

a

。这里有两个事件侦听器，一个用于页面加载，一个用于哈希稍后发生更改（当用户单击选项卡或用户在地址栏中写入另一个哈希时）。

我稍微清理了一下 HTML。我不知道你是否以正确的方式构建它，所以我从导航和选项卡·Bootstrap中获取了一个示例。

// when the page loads, test if hash exists and
// show that tab
$(document).ready(function() {
  let hash = document.location.hash;
  if(hash){
    $(`a[href="${e.target.location.hash}"]`).tab('show');
  }
});

// when the hash changes, test if hash exists and
// show that tab
window.addEventListener('hashchange', e => {
  let hash = e.target.location.hash;
  if(hash){
    $(`a[href="${e.target.location.hash}"]`).tab('show');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel="stylesheet">
<div class="col-md-12">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#stays">List<span class="pronoun"> a</span> Stay</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#experiences">List<span class="pronoun"> an</span> Experience</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#other">Other</a>
    </li>
  </ul>
</div>