Bootstrap选项卡式窗格，显示加载的所有选项卡

Question

我的代码显示加载的所有标签。如果我从其他选项卡中删除“活动”，则它们不会在各自的窗格中显示图形。这怎么可以解决？我正在使用bootstrap。

<div class ="container col-sm-12 col-md-12 col-lg-12">
<div id="monitor" class="panel panel-default tab-box">
    <div class="panel-heading" style="height: 60px">
         <h3 class="panel-title" style = "margin-bottom: 5px">
            <i class="fa fa-flag"></i>
            Steps count
        </h3>
        <ul class="nav nav-tabs">
            <!-- Week tab -->
            <li class="active"> <a href="#week-tab" data-toggle="tab" data-identifier="line">Week</a></li>
            <!-- Month tab -->
            <li> <a href="#month-tab" data-toggle="tab" data-identifier="bar2">Month</a></li>
            <!-- Year -->
            <li> <a href="#year-tab" data-toggle="tab" data-identifier="bar3">Year</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div id="week-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                <div id="week_step-line" class = "graph" ></div>

                </div>

            </div>
            <div id="month-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                <div id="month_step-line" class = "graph" ></div>

                </div>
            </div>

            <div id="year-tab" class="tab-pane active">
                <div class="row" style="margin-left: 10px">

                    <div id="year_step-line" class = "graph" ></div>

                </div>
            </div>
        </div>
    </div>
</div>

添加了我的问题图片。如果我没有将所有标签设置为活动状态，那么我的morris图表空间太小。

http://imgur.com/u1Vba7s

Answer 1

这很好.. DEMO

        <div class="panel panel-default">
   <div class="panel-heading">
 Steps count
       </div>
   <div class="panel-body">
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#Week" aria-controls="home" role="tab" data-toggle="tab">Week</a></li>
    <li role="presentation"><a href="#Month" aria-controls="profile" role="tab" data-toggle="tab">Month</a></li>
    <li role="presentation"><a href="#Year" aria-controls="messages" role="tab" data-toggle="tab">Year</a></li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Week">1...</div>
    <div role="tabpanel" class="tab-pane" id="Month">2...</div>
    <div role="tabpanel" class="tab-pane" id="Year">3...</div>

  </div>

</div>

        </div>
</div>

Answer 2

您可以使用tab tab方法在显示选项卡时触发脚本。你可以让它对所有标签都是全局的，也可以是id特定的。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

     // your script

})

您可以触发图表方法，或者如果它有任何实际方法，您可以触发它。希望这个解决方案能帮到你