堆栈内存溢出
  繁体   English   中英

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

[英]How to fix data-bs-target bootstrap version 5 not working?

 原文  2021-10-22 17:21:34  4   1    javascript/ vbscript/ asp-classic/ bootstrap-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>

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

图片

1 个解决方案

解决方案1
 2  2021-10-22 17:38:52

您的 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/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类添加到对应于您的tab-pane nav-link元素

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 Js 将 data-bs-target 添加到按钮？ 一种在html属性值data-bs-target的变量前插入#的方法 我从 vuejs 开始并使用 bootstrat。 我不知道如何使用里面的道具 id 来区分按钮，例如。 元素 id 和 data-bs-target Bootstrap Data-bs-toggle 在当前版本中不起作用？ Bootstrap 下拉菜单不起作用 - 如何修复？ 为什么 data-bs-interval="false" 在 2023 年不再适用于 bootstrap 5.2.3？ Bootstrap shown.bs.tab 事件不起作用 使用数据目标而不是href的选项卡时，Bootstrap选项卡不起作用 如何在 angular 中的 function 中使用 JavaScript 触发 bootstrap5 data-bs-dismiss Bootstrap崩溃动态“数据目标”无法按需工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM