如何在迭代模态中显示选项卡？答案

【问题标题】：How can I display tabs within an iterated Modal?如何在迭代模态中显示选项卡？
【发布时间】：2013-04-18 18:53:30
【问题描述】：

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

【问题讨论】：

标签： php html twitter-bootstrap tabs

【解决方案1】：

在每次迭代中创建具有相同 ID 的 tab-panes，负责切换选项卡的 JavaScript 仅对具有给定 ID 的第一个元素进行操作，这就是为什么只有第一个模式中的选项卡有效。

您还应该在每次迭代时将$k 添加到hrefs 和ids：

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

【讨论】：