$（'。col-md-9'）。width（）返回0

Question

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

这是一个小提琴： 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"));
        }
    });
})

我该如何解决？

Answer 1

时间问题，标签尚未打开，因此尚未调整列的大小，请尝试此操作

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

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

更好的解决方案是挂入引导程序提供的open事件，类似这样

$('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/