我在模式中有一些标签,通过点击不同的按钮进行迭代。单击第一个按钮时,可以打开所有选项卡。但他们不能从第二个按钮开始工作。虽然显示按钮所在行的详细信息的第一个选项卡可以很好地工作,并显示与该按钮链接的正确信息。 $ k增加后如何让标签工作?这就是我所拥有的:
<?php for($k=0; $k<$bookingCount; ++$k){ ?>
<div id="bookingDetails<?php echo $k; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">...</div>
<div class="modal-body">
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<ul class="nav nav-tabs" id="myTab">
<li><a href="#details" data-toggle="tab" class="active">Details</a></li>
<li><a href="#sms" data-toggle="tab">SMS</li>
<li><a href="#email" data-toggle="tab">Email</li>
<li><a href="#phone" data-toggle="tab">Phone</li>
<li><a href="#post" data-toggle="tab">Post</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details">...</div>
<div class="tab-pane" id="sms">...</div>
<div class="tab-pane" id="email">...</div>
<div class="tab-pane" id="phone">...</div>
<div class="tab-pane" id="post">...</div>
</div>
<div class="modal-footer">...</div>
<?php } ?>
答案 0 :(得分:1)
在每次迭代中,您创建具有相同ID的tab-pane
,负责切换选项卡的JavaScript仅对具有给定ID的第一个元素进行操作,这就是为什么只有第一个模态中的选项卡正在工作的原因。
您还应该在每次迭代时将$k
添加到href
和id
:
<ul class="nav nav-tabs" id="myTab">
<li><a href="#details_<?=$k ?>" data-toggle="tab" class="active">Details</a></li>
<li><a href="#sms_<?=$k ?>" data-toggle="tab">SMS</li>
<li><a href="#email_<?=$k ?>" data-toggle="tab">Email</li>
<li><a href="#phone_<?=$k ?>" data-toggle="tab">Phone</li>
<li><a href="#post_<?=$k ?>" data-toggle="tab">Post</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details_<?=$k ?>">...</div>
<div class="tab-pane" id="sms_<?=$k ?>">...</div>
<div class="tab-pane" id="email_<?=$k ?>">...</div>
<div class="tab-pane" id="phone_<?=$k ?>">...</div>
<div class="tab-pane" id="post_<?=$k ?>">...</div>
</div>