创建 Bootstrap 选项卡 link

Question

我有一个选项卡列表，如下所示：

<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 不会改变。但是，如果，广告示例，我想将第二个选项卡（单击时）重定向到以下 link：/prova_uno ???

Answer 1

更正您现有的代码不会更改地址，它将显示一个命名锚点“#info_generali”或“#moduli_lavorazione”。

如果您希望其中一个选项卡不切换到其他选项卡而是加载新页面，请移除数据切换并将目标 href 设置为您希望打开的页面：

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

回顾一下，让您的一个标签格式的导航链接打开一个新页面而不是显示一个标签：

删除数据切换
在 href

创建 Bootstrap 选项卡 link

Create Bootstrap tab link

html

django-templates

bootstrap-modal

bootstrap-4