【发布时间】：2016-08-31 07:42:44
【问题描述】：
我正在尝试创建一个包含多个选项卡的页面。在每个选项卡中，都有一个表格，每一行都有一个打开模式的按钮。只要我的一个选项卡有模式，我的代码就可以正常工作。但是，一旦我有 2 个或更多带有模式的选项卡，两个选项卡的内容将显示在一个页面上，而不是被分成单独的选项卡。
这是我的代码：
edit-profile.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">×</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">×</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>
谁能帮我弄清楚为什么当两个选项卡都有模式时我的表格显示在同一页面上？ modal 有不同的 ID。
【问题讨论】：
-
你有
<ul class="nav nav-tabs"></ul>标签吗？ -
是的，我的 edit-profile.ejs 文件中有这个：
-
那么问题可能出在引导 css 和 js 以及 jQuery 中。检查这个例子，它包含正确的文件：http://www.w3schools.com/bootstrap/tryit.asp
-
我已经包含了所有必要的文件，我只是从这个例子中省略了它们以保持简短。选项卡工作得很好，模式和/或数据表是破坏代码的。
-
现在标签可以工作了！模态和表格有什么问题？
标签： javascript jquery html css twitter-bootstrap