php - 如何通过 PHP 中的单击事件使用 Bootstrap 垂直选项卡将动态内容显示到 div 中

Question

基本上，我使用 Bootstrap 垂直选项卡将静态内容显示到 div 中。像那样的东西。

HTML:http://ezytheme.com/test/verticaltimeline/index.html

但问题是我无法通过 PHP 中的单击事件使用 bootstrap 垂直选项卡将动态内容显示到 div 中

我正在尝试解决但无法获得任何适当的指导。谁能告诉我解决这个问题的方法。

下面是我的代码:

索引.php

<?php
   include("vars.php");
?> 

<div class="lan_vertical_timeline">
    <ul class="nav nav-tabs" role="tablist" id="myTab">
        <?php $j=3; ?>
        <?php for($i=1; $i<=$j; $i++)
                { ?>
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                            <ul class="cbp_tmtimeline">
                                <li>
                                    <div class="cbp_tmicon"></div>
                                    <div class="cbp_tmlabel">
                                        <h3>CHIILDREN IN CARE</h3>
                                        <p>Ad munere detraxit.</p>
                                    </div>
                                </li>
                            </ul>                           
                        </a>
                    </li>
            <?php } ?>          
    </ul>

    <?php
        $i = 0;
        foreach($blog_item as $newItem) {
        ?>
            <div class="back-thumbnail">
                    <div class="blog-content">
                        <h2><?php echo $newItem['name']; ?></h2>
                        <?php echo $newItem['description']; ?>                                
                    </div>
                </div>
            </div>
        <?php
            $i++;
        }
        ?>
</div>


   <script>
        $('#myTab a').click(function (e) {
          e.preventDefault()
          $(this).tab('show');
          $( ".tab-pane" ).addClass( "animated fadeInRight" );
        });
    </script>

变量.php

<?php

$blog_item = array(
array(
    "name" => "Item One",
    "description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
),
array(
    "name" => "Item Two",
    "description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
),
array(
    "name" => "Item Three",
    "description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
)    
);

请查看此链接:http://ezytheme.com/test/php/verticaltimeline/

我如何实现这样的目标？ http://ezytheme.com/test/verticaltimeline/index.html

jsfiddle:http://jsfiddle.net/bretlee45/btt07zsj/1/

Answer 1

您可以使用 JQuery Ajax Api Documentation