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

问题描述 投票：0回答：2

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

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

我在下图中的“工作”屏幕上，单击“个人”，但它仍保留在工作屏幕上。

image

javascript vbscript asp-classic bootstrap-5
2个回答
2
投票

您的 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 文档的正确结构 这里

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

0
投票

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.