个人中心
gpt4 book ai didi

javascript - 具有多个模式的多选项卡页面( Bootstrap )

转载 作者：行者123 更新时间：2023-11-28 05:37:29 26 4
gpt4 key购买 nike

我正在尝试创建一个具有多个选项卡的页面。在每个选项卡中，都有一个表格，每行都有一个打开模式的按钮。只要我的选项卡之一具有模式，我的代码就可以正常工作。但是，一旦我有 2 个或更多带有模式的选项卡，两个选项卡的内容将显示在一页上，而不是分成单独的选项卡。

这是我的代码:

编辑配置文件.ejs:

  <ul class="nav nav-tabs tabs-left">
     <li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li>
     <li><a href="#edit2" data-toggle="tab">Edit 2</a></li>
  </ul>

 <!-- Tab content -->
 <div class="col-xs-9">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div class="tab-pane active" id="edit1">
                      <div id="edit1">
                        <% include ./partials/edit-profile/_edit1%>
                      </div>
                    </div>
                    <div class="tab-pane" id="edit2">
                      <div id="edit2">
                        <% include ./partials/edit-profile/_edit2%>
                      </div>
                    </div>
   <center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>

在我的 _edit1.ejs 部分中，我有:

<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit1-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Edit 1 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit1-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>

在_edit2.ejs中，我有类似的内容:

<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit2-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Edit 2 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit2-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>

有人能帮我弄清楚为什么当两个选项卡都有模态时我的表格显示在同一页面上吗？模态框有不同的 ID。

最佳答案

这里，它正在工作

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<ul class="nav nav-tabs tabs-left">
     <li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li>
     <li><a href="#edit2" data-toggle="tab">Edit 2</a></li>
  </ul>

 <!-- Tab content -->
 <div class="col-xs-9">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    
                   <div class="tab-pane active" id="edit1">
                      <div id="edit1">
                        <table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>





<div id="edit1-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Edit 1 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit1-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
                      </div>
                    </div>

                    <div class="tab-pane" id="edit2">
                      <div id="edit2">
                        <table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> Microsoft</td>
      <td> User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit2-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Edit 2 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit2-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
                      </div>
                    </div>
               </div>
</div>
   <center>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button>
</center>





  
</div>

</body>
</html>

关于javascript - 具有多个模式的多选项卡页面( Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39238132/

26 4 0
文章推荐： ios - UserDefaults 在框架中使用时不保存
文章推荐： ios - Swift - 在 ios 13 上下载文件错误
文章推荐： css - ggvis colorbar(或ggplot2)没有任何边距
文章推荐： javascript - 为什么我的 Webpack Sass 配置不起作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com