$（'。col-md-9'）。width（）返回0 [英] $('.col-md-9').width() returns 0

问题描述

我使用Bootstrap实现了导航标签。当一个特定的选项卡变为活动状态时，我试图获取div的宽度。正确检测到活动选项卡时，宽度返回0.我不确定为什么会发生这种情况。

I have implemented Navigation Tabs using Bootstrap. I am trying to get the width of a div when one particular tab becomes active. While the active tab is detected correctly, the width is returned 0. I'm not sure why this is happening.

这是一个小提琴： http：// jsfiddle。 net / pThn6 / 811 /

HTML：

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li class="active"><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">
        <div class='col-md-9'>
            ...Content vol...
        </div>
    </div>
    <div class="tab-pane active" id="bbb">

    </div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

JS：

$(function() {
    $('a[data-toggle="tab"]').on('click', function(e) {
        var s = "" + (e.target);

        if(s.search('aaa') != -1) {
            alert($('.col-md-9').css("width"));
        }
    });
})

我该如何解决这个问题？

How can I solve this?

推荐答案

计时问题，标签尚未打开，所以它没有调整列的大小，试试这个

timing issue, the tab hasn't opened yet so it hasn't resized the column, try this

http://jsfiddle.net/pThn6/812/

setTimeout(function() {
    alert($('.col-md-9').width());
}, 100);

一个更好的解决方案是挂钩bootstrap提供的open事件，像这样

a better solution would be to hook into the open event provided by bootstrap, something like this

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

    if(tab.search('aaa') != -1) {
        alert($('.col-md-9').width());
    }
});

小提琴： http://jsfiddle.net/pThn6/819/

这篇关于$（'。col-md-9'）。width（）返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！