时间戳

首页 > 解决方案 > 如何在 HTML 标签中导航

html - 如何在 HTML 标签中导航

问题描述

我是 HTML 新手，我下载了一个使用选项卡的模板，这是如何呈现的：

在此处输入图像描述

所以我需要的是，当我点击“Próximo”时，它会将选项卡更改为我选择的下一个或其他选项卡。我试图做类似的事情，但它没有奏效！：

<button type="button" class="btn btn-danger nav-link"  aria-expanded="true" href="#Legal" data-toggle="tab">
  Próximo
</button>

编码 ：

<ul class="nav nav-tabs mb-3">
   <li class="nav-item">
                                <a href="#CompanyData" data-toggle="tab" aria-expanded="false" class="nav-link active">
                                    <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
                                    <span class="d-none d-lg-block">Dados da Empresa</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#Legal" data-toggle="tab" aria-expanded="true"
                                   class="nav-link">
                                    <i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i>
                                    <span class="d-none d-lg-block">Cadastrar Empresa</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#listCompanies" data-toggle="tab" aria-expanded="false" class="nav-link">
                                    <i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i>
                                    <span class="d-none d-lg-block">Listar Empresas</span>
                                </a>
                            </li>                         
</ul>

和

<div class="tab-content">
                            <div class="tab-pane show active" id="CompanyData">

                            </div>
                            <div class="tab-pane " id="Legal">

                            </div>
                            <div class="tab-pane" id="listCompanies">

                            </div>
                        </div>

标签： html

解决方案

您不能让其他按钮完成选项卡按钮的任务，因为 bootstrap.js 在内部对其进行了一些更改。但是我们可以做的是模拟点击事件，如果我们点击我们的按钮，就让tab按钮点击。

为我们的按钮添加点击回调函数，如下所示

<button onclick="makeClick()" type="button" class="btn btn-danger nav-link"  aria-expanded="true" href="#Legal" data-toggle="tab">
  Próximo
</button>

为列表中的每个 li 分配 id

<ul class="nav nav-tabs mb-3">
 <li class="nav-item" >
    <a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
       <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Dados da Empresa</span>
    </a>
 </li>
 <li class="nav-item">
   <a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true"
                               class="nav-link">
     <i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Cadastrar Empresa</span>
   </a>
  </li>
  <li class="nav-item">
    <a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
       <i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Listar Empresas</span>
    </a>
  </li>

并在您的 JS 文件中创建以下函数：

makeClick(){
 $('#Listar').click(); //this will simulate the click and Listar tab will be opened
}

代码：

function makeClick() {
  $('#Cadastrar').click();
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>


<ul class="nav nav-tabs mb-3">
  <li class="nav-item">
    <a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
      <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-lg-block"> Dados da Empresa </span>
    </a>
  </li>
  <li class="nav-item">
    <a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true" class="nav-link">
      <i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-lg-block">Cadastrar Empresa</span>
    </a>
  </li>
  <li class="nav-item">
    <a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
      <i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-lg-block">Listar Empresas</span>
    </a>
  </li>
 

  <div class="tab-content">
    <div class="tab-pane show active" id="CompanyData" role="tabpanel">
      Dados da Empresa Tab
      <button onclick="makeClick()" type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">Próximo
</button>
    </div>
    <div class="tab-pane " id="Legal" role="tabpanel">
      Cadastrar Empresa Tab
    </div>
    <div class="tab-pane" id="listCompanies" role="tabpanel">
      Listar Empresas Tab
    </div>
  </div>

推荐阅读