0

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

1 回答 1

1

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

您还应该在每次迭代时添加$k到hrefs 和s ：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>
于 2013-04-18T19:41:07.527 回答