Php 如何在迭代模式中显示选项卡？

我在一个模式中有一些选项卡，通过单击不同的按钮进行迭代。单击第一个按钮时，可以打开所有选项卡。但它们不能从第二个按钮开始工作。尽管显示按钮所在行的详细信息的第一个选项卡工作正常，并显示与该按钮链接的正确信息。在$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 } ?>

在您创建具有相同id的
tab pane
s的每次迭代中，负责切换选项卡的JavaScript只在具有给定id的第一个元素上运行，这就是为什么只有第一个模式中的选项卡工作

您还应在每次迭代中向
href
s和
id
s添加
$k
：

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