jquery 工具 TABS - 在选项卡中隐藏 DIV？答案

【问题标题】：jquery tools TABS - hiding DIV in the Tabs?jquery 工具 TABS - 在选项卡中隐藏 DIV？
【发布时间】：2011-08-22 22:18:59
【问题描述】：

我正在使用简单的 jQuery 工具选项卡

$("ul.tabs").tabs("div.panes > div");

使用这个 html：

<!-- the tabs --> 
                <ul class="tabs"> 
                    <li><a href="#">Passenger Record</a></li> 
                    <li><a href="#">Annotations (10)</a></li> 
                </ul> 

                <!-- tab "panes" --> 
                <div class="panes"> 
                    <div>
                    First tab content. Tab contents are called "panes"
                        <div class="NoShow">THIS DIV IS HIDDEN??</div>
                    </div> 
                    <div>Second tab content</div> 
                </div>

所以 class="NoShow" 的 div 被隐藏了。我相信它与javascript有关

("div.panes > div");

但我不想隐藏 DIV 选项卡中的 DIV？如何隐藏与选项卡关联的 DIV？

【问题讨论】：

尝试为特定于选项卡的选项卡提供一些类名并将选择器更改为("div.panes > div.ClassName")

标签： jquery tabs jquery-tools

【解决方案1】：

$("div.panes > div"); 仅指直接子代。 'NoShow' div 是 'panes' 的孙子。

改用$("#NoShow") - 它也更快，因为您使用的是 ID 而不是类。

【讨论】：

【解决方案2】：

嵌套 div 无法显示的原因是你有一个 css 属性

.panes div {
    display:none;
}

来自 jquery 工具的例子： http://jquerytools.org/media/css/tabs-panes.css

【讨论】：