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

Question

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

4

我在使用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

- TMPilot

你是否在使用与jqueryui.js相匹配的正确版本的jQueryui.css？ - Kevin B

肯定的。很奇怪，因为在本地文件上一切正常，但是在服务器上它决定在加载时保持面板的显示。 - TMPilot

尝试在两个环境中刷新所有缓存，这会对任何方面产生影响吗？ - Kevin B

很遗憾，我不得不手动将style="display:none;"添加到除第一个选项卡以外的所有选项卡。这是非常恼人的问题。在jsfiddle上它运行得很好。我猜测可能与另一个插件/框架发生了冲突，但是如果没有错误提示，缩小范围可能需要很长时间。 - TMPilot

我遇到了同样的问题，display: none也是我不得不采取的方法。WordPress。 - 916 Networks

3个回答

0

将以下代码添加到你的CSS文件中：

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

!important 确保没有其他内容会覆盖此设置。

- geek-merlin

这是最后的手段，边缘情况的解决方案。通常最好使用更具体的选择器来覆盖先前的样式。 - DavidScherer

0

我也遇到了同样的问题。尝试在你的样式表中添加这个确切的代码块。

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

由于某些原因，我一直在遇到样式问题...

div {display: block;}

......这一直覆盖了我使用Ronald提供的.ui-tabs-hide修复方法。

希望这可以帮到你，

Rock

- Racksickle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ronald De Ruiter · Accepted Answer

这种方法有点简单粗暴，因为它没有解决问题的根本原因，但它确实解决了问题；我只需将以下内容添加到我的样式表中即可。

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

希望这能帮助到有需要的人。