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

myzjeezk 于 11个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(151)

我的代码在加载时显示所有标签。如果我从其他标签中删除“活动”，它们将不会在各自的窗格中显示图形。如何修复这个问题？我使用 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>

字符串
添加了我的问题的图片。如果我没有激活所有的标签，我的莫里斯图表空间太小。
https://i.stack.imgur.com/u25Ad.jpg

twitter-bootstrap

来源：https://stackoverflow.com/questions/29920205/bootstrap-tabbed-pane-displaying-all-tabs-on-load

2条答案

按热度按时间

yizd12fk1#

这很好用..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>

字符串

赞(0）回复(0）举报 11个月前

twh00eeo2#

你可以使用tab显示方法来触发你的脚本当标签显示。你可以让它全局的所有标签或也id特定。

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

     // your script

})

字符串
你可以触发你的图方法，或者如果它有任何relow方法，你可以触发它。希望这个解决方案对你有帮助。

赞(0）回复(0）举报 11个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答