Question

我使用<ul>制作了四个标签的横向菜单。

每个标签都有<div class="content">个链接。第一个标签是可见的，其他三个是隐藏的。我想只选择可见我选择的标签。

我已尝试使用:hover和:select，但我无法解决此问题。

<div id="labels-menu">
    <ul>
        <li><a href="#1">Label 1</a>

        </li>
        <li><a href="#2">Label 2</a>

        </li>
        <li><a href="#3">Label 3</a>

        </li>
        <li><a href="#4">Label 4</a>

        </li>
    </ul>
</div>
<div id="container">
    <div id="label-1" class="content">
        <div class="left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p>
        </div>
    </div>
    <div id="label-2" class="content">
        <div class="left">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
        <div class="right">
            <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p>
        </div>
    </div>
    <div id="label-3" class="content">
        <div class="left">
            <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p>
        </div>
        <div class="right">
            <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p>
        </div>
    </div>
    <div id="label-4" class="content">
        <div class="left">
            <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p>
        </div>
        <div class="right">
            <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p>
        </div>
    </div>
</div>

有没有办法只使用CSS？

Answer 1

根据我的科学，只有一种方法可以解决它，即使用无线电或检查按钮，但问题是容器高度是固定的。

如何通过选择其他元素来制作可见元素？

1 个答案: