Question

我有一个带有UL的div控制我的投资组合项目的过滤，使用.active类我更改了过滤器的活动颜色。但我也有一个低于过滤器的DIV，我希望它在每个过滤器被点击时出现并消失。我只是遇到了CSS选择器的问题！

我的HTML：

<!--=== Portfolio Filter ===-->
<div class="row">
    <ul class="nav nav-pills col-xs-12">
        <li class="filter" data-filter="all">Show Me TV</li>
        <li class="filter" data-filter="print">Conventions</li>
        <li class="filter" data-filter="web">Elite</li>
    </ul>
</div>

<!--=== Description ===-->
<div class="container">
    <div class="row">
        <span class="category-description">
            all description
        </span>
        <span class="category-description">
            conventions description
        </span>
        <span class="category-description">
            elite description
        </span>
    </div>
</div>

CSS

.category-description { visibility:hidden; }
#portfolio .nav > li.active { color:#e21f24; }
#portfolio .nav > li.active + .category-description { visibility:visible; }

有人可以帮忙吗？

Answer 1

我认为简单而干净的解决方案是更改标记并将description元素移到li元素中：

<li class="filter" data-filter="print">
    Conventions
    <div class="description">Conventions Description</div>
</li>

现在您可以控制description元素：

.description { display: none; }
li.active .description { display: block; }

（您需要通过使用CSS来控制结果以实现您想要的效果）

JSFiddle Demo

使div显示为活动状态

1 个答案: