可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm having a strange problem with jQuery tabs. 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

回答1:

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.

回答2:

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.

Hope this helps,

Rock

回答3:

Add this to your css:

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

The !important assures that nothing else will override this.

jQuery UI Tabs not hiding inactive tabs on load

问题:

回答1:

回答2:

回答3:

收藏的人(0)

jQuery UI Tabs not hiding inactive tabs on load

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮