简体   繁体   English

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

[英]jQuery UI Tabs not hiding inactive tabs on load

I'm having a strange problem with jQuery tabs. 我对jQuery标签有一个奇怪的问题。 The tabs are working fine, but the inactive panels are remaining visible on load, and it's only when selecting other tabs that they are hidden. 选项卡工作正常,但非活动面板在加载时仍然可见,并且仅在选择隐藏它们的其他选项卡时才会显示。

Here is my code: 这是我的代码:

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

I've not seen this before. 我以前没见过这个。 Can anyone spot anything I might have missed? 谁能发现我可能错过的任何东西?

Cheers, RJ 干杯,RJ

Bit crude as it doesn't address the root of the problem but it sure solved it; 比特原油,因为它没有解决问题的根源,但它确实解决了它; i simply added the following to my stylesheet. 我只是将以下内容添加到我的样式表中。

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

Hope it helps someone. 希望它可以帮助某人。

I've been having the same problem. 我一直有同样的问题。 Try adding this exact chuck in your style sheet. 尝试在样式表中添加这个精确的夹头。

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

For some reason I keep getting a style... 出于某种原因,我一直在寻找一种风格......

div {display: block;}

...that kept overriding my .ui-tabs-hide fix that Ronald provided. ...一直在覆盖我的.ui-tabs-hide修复Ronald提供的修复。

Hope this helps, 希望这可以帮助,

Rock 岩石

Add this to your css: 将此添加到您的CSS:

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

The !important assures that nothing else will override this. 重要的是确保没有别的东西可以覆盖它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM