如何通过选择其他元素来生成可见元素？

Question

我用<ul>制作了一个由四个标签组成的水平菜单。

有一个与每个标签链接的<div class="content">。第一个标签是可见的，另外三个是隐藏的。我只想使可见，这是我选择的标签。

我试过用:hover和:select，但我解决不了这个问题。

我的代码：http://jsfiddle.net/Trimax/69YcC/

<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

根据我的科学，解决这个问题的方法只有一种，那就是使用单选按钮或检查按钮，但问题是容器的高度是固定的。