Question

if($('#tab-1').is(':visible'))
    $('#extras').show();
else
    $('#extras').hide();

            <div class='col-lg-12 pull-left'>
                <div class='tab-content'>
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#tab-1" data-toggle='pill'>Lobby</a></li>
                        <li><a href="#tab-2" data-toggle='pill'>Television Talk</a></li>
                    </ul>

                    <br />

                    <div id='tab-1' class='tab-pane active'>
                        <div class='col-lg-12'>
                            <div class="panel panel-primary">
                                <div class='panel-heading'><button class='btn btn-default'>Lobby</button> - <button class='btn btn-default'>Follow Chat</button> - <button class='btn btn-default'><span class='glyphicon glyphicon-user'></span>&nbsp; 236</button> - <button class='btn btn-default'><span class='glyphicon glyphicon-ok'></span> &nbsp; Private</button></div>
                                <div class='panel-body'>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id='tab-2' class='tab-pane'>
                    </div>

                </div>
            </div>

我有一个标签式div，当id tab-1不可见时，我不想显示div额外内容。

如果主标签（tab-1）可见或显示内容，我希望显示extras div。

如果显示任何其他标签内容，我希望隐藏额外内容。

上面的代码不应该工作吗？为什么不呢？

感谢。

哦，我正在使用bootstrap的JavaScript（和css）。

Answer 1

jQuery(function( $ ){ // DOM ready (shorthand)

     $('#extras').toggle( $('#tab-1').is(':visible') );

});

您需要使用document.ready处理函数，以确保您的文档对象模型已被读取并准备好进行人工控制。放入你的行动和功能

_{来自 DOCS ：http://api.jquery.com/ready/}

jQuery .is（'：visible'）不工作？

1 个答案: