Question

我遇到了jQuery标签的奇怪问题。选项卡工作正常，但非活动面板在加载时仍然可见，并且只有在选择隐藏它们的其他选项卡时才会显示。

这是我的代码：

<head>
<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); 
(function($) {
    $(function() {  
        /* UI Tabs */
        $.fn.tabs && $(".tabs").tabs();
    });
}) (jQuery);
</script>
</head>
<body>
<div class="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
    ...
    </div>
    <div id="tab-2">
    ...
    </div>
    <div id="tab-3">
    ...
    </div>
</div>
</body>

我以前没见过这个。谁能发现我可能错过的任何东西？

干杯， RJ

Answer 1

比特原油，因为它没有解决问题的根源，但它确实解决了它;我只是将以下内容添加到我的样式表中。

    <style>
        .ui-tabs-hide { display: none; }
    </style>`

希望它有所帮助。

Answer 2

我一直有同样的问题。尝试在样式表中添加这个精确的夹头。

div .ui-tabs .ui-tabs-hide {
display: none;
}

出于某种原因，我一直在寻找一种风格......

div {display: block;}

...一直在覆盖我的.ui-tabs-hide修复Ronald提供的修复。

希望这有帮助，

岩

Answer 3

将此添加到您的css：

.ui-tabs-hide { 
    display: none !important; 
 }

！important 确保没有其他内容会覆盖此内容。

jQuery UI选项卡不会在加载时隐藏非活动选项卡

3 个答案: