时间戳

首页 > 解决方案 > 如何修复 data-bs-target 引导版本 5 不起作用？

javascript - 如何修复 data-bs-target 引导版本 5 不起作用？

问题描述

我正在尝试单击按钮选项卡并允许它打开我的内容，但它不起作用。我似乎有正确的代码，但它仍然无法正常工作。我希望它能够在我单击按钮选项卡后打开我的内容。这真的很令人困惑，我想我已经尝试了一切

<%per_sel = "false"
job_sel = "false"
per_link = "nav-link"
job_link = "nav-link"
per_class = "tab-pane fade"
job_class = "tab-pane fade"
per_dis = " disabled"
job_dis = " disabled"

if app_pg >=5 then
   per_sel     = "true"
   per_dis     = ""
end if    
if app_pg = 5 then
   per_class   = "tab-pane fade show active"
   per_link = "nav-link active"
end if
if app_pg >=6 then
   job_sel     = "true"
   job_dis     = ""
end if    
if app_pg = 6 then
   job_class   = "tab-pane fade show active"
   job_link = "nav-link active"
end if%>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demographics</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/theme.css">
        <script src="assets/js/bootstrap.bundle.min.js" defer></script>
    </head>
    <body class="d-flex flex-column vh-100">
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
               <button class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab"  aria-controls="personal" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
            </li>
            <li class="nav-item">
              <button class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
            </li>
        </ul>
        <div class="tab-content" id="appTabContent">
           <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
               <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
            
                  <h2>Personal Information</h2>
                  <div class="row my-2 g-4">
                      <div class="col-12 col-md-5">
                          <label for="firstName" class="form-label">First Name</label>
                          <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
                      </div>
                      <div class="col-12 col-md-5">
                          <label for="lastName" class="form-label">Last Name</label>
                          <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
                      </div>
                  </div>
               </form>
           </div>
           <div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria- 
             labelledby="job-tab">Job
           </div>
           <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">

           </form>
       </div>


      <script src="assets/js/bootstrap.bundle.min.js"></script>
    </body>
  </html>

我在下图中的工作屏幕上，然后单击个人，但它仍停留在工作屏幕上。

图片

标签： javascriptvbscriptasp-classicbootstrap-5

解决方案

您的 HTML 不尊重 HTML 文件的正确结构，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<!-- YOUR CONTENT HERE -->

</body>
</html>

使用 bootstrap 5，如果您将其放入，您的代码似乎可以完美运行

<ul class="nav nav-pills nav-fill">
      <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab"  aria-controls="personal" aria-selected="false">Personal</button>
      </li>
      <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
      </li>
  </ul>
  <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
      <h2>Personal Information</h2>
      <div class="row my-2 g-4">
         <div class="col-12 col-md-5">
           <label for="firstName" class="form-label">First Name</label>
           <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
         </div>
         <div class="col-12 col-md-5">
            <label for="lastName" class="form-label">Last Name</label>
            <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
         </div>
      </div>
   </div>

进入<body>标签查看 HTML 文档的正确结构here

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
  </li>
</ul>
<div class="tab-pane fade active show " id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
  <h2>Personal Information</h2>
  <div class="row my-2 g-4">
    <div class="col-12 col-md-5">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
    </div>
    <div class="col-12 col-md-5">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
    </div>
  </div>
</div>
<div class="tab-pane fade" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
  job
</div>

如果您想在加载时显示特定选项卡，只需将active show类添加到tab-pane fade元素。

<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">

为了完美，您可以将active类添加到nav-link与您的元素相对应的元素tab-pane

<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>

编辑：您必须尊重引导结构才能使其正常工作

你.tap-pane 必须是孩子，.tab-content所以你的结构必须是这样的：

.tab-content > .tab-pane > form

或者

.tab-content > form.tab-pane


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
  </li>
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
  </li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
  <!-- tab-pane CHILDREN OF .tab-content -->
  <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
    <h2>Personal Information</h2>
    <!-- form CHILDREN of .tab-pane -->
    <form>Your form here</form>
  </div>
  <div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
    <h2>Job</h2>
    <form>Your form here</form>
  </div>
</div>

推荐阅读