HTML-закладки не работают для панели вкладок ul - PullRequest
Новая
       14

HTML-закладки не работают для панели вкладок ul

0 голосов
/ 01 апреля 2019

Я хочу открыть скрытую закладку с внешней страницы это не работает со мной

Поэтому, когда я открываю ссылку, например: (page.php # translationator2)

это дает только верхние кнопки и никакого контента ниже

пожалуйста, сообщите 

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

1 Ответ

0 голосов
/ 01 апреля 2019

Попробуйте добавить class="active" в первую вкладку после tab-pane, надеюсь, это решит вашу проблему.Спасибо

Если вы хотите показать свой tabs в зависимости от хеша в URL, вы должны добавить скрипт ниже в вашем методе $(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>
...