如何在PHP中使用bootstrap垂直选项卡通过click事件将动态内容显示到div中

Question

Basically i show static content a into div using Bootstrap vertical tab. Something like that.

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

But problem is that i can't show dynamic content into a div using bootstrap vertical tab by click event in PHP

I'm trying to solve but can't get any proper guide. Anybody tell me a way to solve this problem.

Bellow my code:

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

vars.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>",
)    
);

Please see this link: http://ezytheme.com/test/php/verticaltimeline/

How do I achieve something like that? http://ezytheme.com/test/verticaltimeline/index.html

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

Answer 1

您可以使用JQuery Ajax Api文档