html书签不适用于ul选项卡面板

Question

我想从外部页面打开一个隐藏的id书签，它不与我合作

所以当我打开链接例如：（page.php＃translator2）

它只提供顶部按钮，下面没有内容

请指教

<div class='profile_main_column column ' style='margin-top: 10px;'>
  <ul class='nav nav-tabs' role='tablist' id='profileTabs'>
    <li role='presentation'><a href='#translator1' aria-controls='translator1' role='tab' data-toggle='tab'>translator1_name </a></li>
    <li role='presentation'><a href='#translator2' aria-controls='translator2' role='tab' data-toggle='tab'>$translator2_name</a></li>
    <li role='presentation'><a href='#translator3' aria-controls='translator3' role='tab' data-toggle='tab'>$translator3_name</a></li>
  </ul>
  <div class='tab-content'>
    <div role='tabpanel' class='tab-pane ' id='translator1'>
      <div>
        <u><b>title1</b></u> body1
      </div>
    </div>
    <div role='tabpanel' class='tab-pane ' id='translator2'>
      <div>
        <u><b>title2</b></u> body2
      </div>
    </div>
    <div role='tabpanel' class='tab-pane ' id='translator3'>
      <div>
        <u><b>title3</b></u> body3
      </div>
    </div>
  </div>
</div>

Answer 1

尝试在class="active"之后的第一个标签中添加tab-pane，我希望它能解决你的问题。谢谢

如果你想根据URL中的哈希显示你的tabs，你必须在你的$(document).ready方法中添加下面的脚本。

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

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class='profile_main_column column ' style='margin-top: 10px;'>
  <ul class='nav nav-tabs' role='tablist' id='profileTabs'>
    <li role='presentation'><a href='#translator1' class="active" aria-controls='translator1' role='tab' data-toggle='tab'>translator1_name </a></li>
    <li role='presentation'><a href='#translator2' aria-controls='translator2' role='tab' data-toggle='tab'>$translator2_name</a></li>
    <li role='presentation'><a href='#translator3' aria-controls='translator3' role='tab' data-toggle='tab'>$translator3_name</a></li>
  </ul>
  <div class='tab-content'>
    <div role='tabpanel' class='tab-pane active' id='translator1'>
      <div>
        <u><b>title1</b></u> body1
      </div>
    </div>
    <div role='tabpanel' class='tab-pane ' id='translator2'>
      <div>
        <u><b>title2</b></u> body2
      </div>
    </div>
    <div role='tabpanel' class='tab-pane ' id='translator3'>
      <div>
        <u><b>title3</b></u> body3
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>