Создать ссылку Bootstrap на вкладке - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть список вкладок, например:

<ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="moduli_lavorazione-tab" data-toggle="tab" href="#moduli_lavorazione" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
            </li>

На самом деле, если я нажму на одну вкладку, URL-адрес не изменится. Но если, например, я хочу перенаправить вторую вкладку (при нажатии) на следующую ссылку: /prova_uno ???

1 Ответ

1 голос
/ 28 апреля 2020

Исправьте, что ваш существующий код не изменит адрес, он покажет именованный якорь "#info_generali" или "#moduli_lavorazione".

Если вы хотите, чтобы одна из этих вкладок не переключалась на вкладку, а вместо этого загружала новую страницу, затем удалите переключатель данных и установите целевую ссылку для страницы, которую вы будете открывать sh:

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
    </li>  <!-- This one will display the tab-->
    <li class="nav-item">
        <a class="nav-link" id="moduli_lavorazione-tab" href="/prova_uno" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
    </li> <!-- This one will navigate to URL /prova_uno -->
</ul>

Итак, резюмируем, чтобы одна из ваших отформатированных навигационных ссылок на вкладке открывала новую страница вместо отображения вкладки:

  • Удалите переключатель данных
  • Установите URL в href
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...