时间戳

首页 > 解决方案 > 创建 Bootstrap 选项卡链接

html - 创建 Bootstrap 选项卡链接

问题描述

我有一个标签列表，如下所示：

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

标签： htmlbootstrap-4django-templatesbootstrap-modal

解决方案

更正您现有的代码不会更改地址，它将显示一个命名锚“#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 中设置 URL

推荐阅读