选项卡内容显示页面重新加载后没有混乱的情况

Question

我的项目中有一些标签页。加载页面后，第一个标签页可以正常工作。如果单击下一个选项卡，则第一个选项卡内容消失。

<div class="col-md-7">
    <div class="tabs-page">
        <ul class="nav-tabs" role="tablist">
            <?php 
                $tabs = array();
                if($sessId == ""){
                    $tabs = array("introduction"=>true, "outline"=>true,"announcement"=>false,"discussion"=>false,"review"=>true, "student"=>false, "comment"=>true); 
                    } else if($checkcourse  && $userid != $sessId && !$sessId == "" ) {
                    $tabs = array("introduction"=>false, "outline"=>true,"announcement"=>true,"discussion"=>true,"review"=>true, "student"=>true, "comment"=>false); 
                    } else if(!$sessId == "" && $userid != $sessId){
                    $tabs = array("introduction"=>true, "outline"=>true,"announcement"=>false,"discussion"=>false,"review"=>true, "student"=>true, "comment"=>true); 
                    } else if($userid == $sessId){
                    $tabs = array("introduction"=>false, "outline"=>true,"announcement"=>true,"discussion"=>true,"review"=>true, "student"=>true, "comment"=>false); 
                }
            ?>  
            <?php $key = array_search('true', $tabs); ?>

                    <?php if($tabs['introduction']) { ?>
                        <li <?php if($key == 'introduction') {?> class="active"<?php } ?>><a href="#introduction" role="tab" data-toggle="tab"><?php echo $this->lang->line('Introduction'); ?></a></li>
                    <?php } ?>
                    <?php if($tabs['outline']) { ?>
                        <li <?php if($key == 'outline') {?> class="active"<?php } ?>><a href="#outline" role="tab" data-toggle="tab"><?php echo $this->lang->line('Outline'); ?></a></li>
                    <?php } ?>
                    <?php if($tabs['announcement']) { ?>
                        <li <?php if($key == 'announcement') {?> class="active"<?php } ?>><a href="#announcement" role="tab" data-toggle="tab"><?php echo $this->lang->line('Announcements'); ?></a></li>
                    <?php } ?>
                    <?php if($tabs['review']) { ?>
                        <li <?php if($key == 'review') {?> class="active"<?php } ?>><a href="#review" role="tab" data-toggle="tab"><?php echo $this->lang->line('Reviews'); ?></a></li>
                    <?php } ?>
                    <?php if($tabs['student']) { ?>
                        <li <?php if($key == 'student') {?> class="active"<?php } ?>><a href="#student" role="tab" data-toggle="tab"><?php echo $this->lang->line('Students'); ?></a></li>
                    <?php } ?>
                    <?php if($tabs['comment']) { ?>
                        <li <?php if($key == 'comment') {?> class="active"<?php } ?>><a href="#comment" role="tab" data-toggle="tab"><?php echo $this->lang->line('Comment'); ?></a></li>
                    <?php } ?>                      
                    <?php if($tabs['discussion']) { ?>
                        <li <?php if($key == 'discussion') {?> class="active"<?php } ?>><a href="#discussion" role="tab" data-toggle="tab"><?php echo $this->lang->line('Discussion'); ?></a></li>
                    <?php } ?>                  
                </ul>

                <div class="tab-content">
                    <?php if($tabs['introduction']) { ?>                        
                        <!-- INTRODUCTION -->
                        <div class="tab-pane fade in <?php if($key == 'introduction') {?> active <?php } ?>" id="introduction">
                            <h1>First Tab</h1>
                        </div>
                        <!-- END / INTRODUCTION -->                     
                    <?php } ?>

                    <?php if($tabs['outline']) { ?>                       
                    <!-- OUTLINE-->
                    <div class="tab-pane fade in <?php if($key == 'outline') {?> active <?php } ?>" id="outline">
                       <h1>Second tab</h1>
                    </div>
                    <!-- END / outline-->                     
                <?php } ?>
                </div>
              </div>
            </div>

当页面重新加载时，“简介”选项卡即已加载，并且其内容已加载，在我单击“大纲”选项卡后，该选项卡内容也已加载。再次如果我单击“简介”选项卡，则不会显示其内容。该如何解决？