1

我有一个类似于

<div class="charts">Content</div>
<div class="tables">Content</div>
....
<div class="charts">Content</div>
<div class="tables">Content</div>

它重复了几次。我的CSS如下

.left {
    width: 32%;
    float: left;
    margin: 5px;
}
div.tables:nth-child(3n+4) {
        clear: both;
        background-color:red;
}
 div.charts:nth-child(3n+4) {
        clear: both;
        background-color:green;
}

使用 jQuery，我最初使用类隐藏所有 DIV 元素charts并使用单击功能，然后显示所有charts并隐藏所有tablesDIV。CSS

charts然而发生的事情是在加载页面时，仍然可以识别命名的 DIV 元素，这意味着显示第一个tablesDIV，然后有两个空白槽，我想要另外两个 DIV 显示一个类tables。

希望这个 jsfiddle 有意义http://jsfiddle.net/gyjJU/3/和http://jsfiddle.net/gyjJU/4/

4

1 回答 1

4

我认为您只需更改 CSS 选择器以考虑隐藏的交替元素即可获得所需的结果：

div.tables:nth-child(6n+8) {
    clear: both;
    background-color:red;
}
div.charts:nth-child(6n+7) {
    clear: both;
    background-color:green;
}

http://jsfiddle.net/mblase75/gyjJU/5/

于 2013-08-12T13:38:58.873 回答