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

Question

我的代码在加载时显示所有选项卡。如果我从其他选项卡中删除 "active"，它们将不会在各自的窗格中显示图表。这是如何修复的？我正在使用 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>

添加了我的问题的图片。如果我没有激活所有选项卡，我的莫里斯图表太少 space。

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

您可以使用选项卡显示方法在显示选项卡时触发您的脚本。您可以将它设置为所有选项卡的全局设置，也可以设置为特定的 ID。

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

     // your script

})

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

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

Bootstrap tabbed pane displaying all tabs on load

html

pane

twitter-bootstrap