Question

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

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);

更好的解决方案是挂钩bootstrap提供的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/

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

1 个答案: