Question

我只是开始使用CSS。我的代码基本上是一个div下的div列表，以及第二个div下的div的第二个列表。这是很多复制粘贴。看：

        <div id="button_container">
        <!--Try and get this to be generated by PHP-->
            <div class="button"><input id="table1"type="radio" name="table_selector" checked="checked"> <label for="table1">1</label></div>
            <div class="button"><input id="table2"type="radio" name="table_selector"> <label for="table2">2</label></div>
            <div class="button"><input id="table3"type="radio" name="table_selector"> <label for="table3">3</label></div>
            <div class="button"><input id="table4"type="radio" name="table_selector"> <label for="table4">4</label></div>
            <div class="button"><input id="table5"type="radio" name="table_selector"> <label for="table5">5</label></div>
            <div class="button"><input id="table6"type="radio" name="table_selector"> <label for="table6">6</label></div>
            <div class="button"><input id="table7"type="radio" name="table_selector"> <label for="table7">7</label></div>
            <div class="button"><input id="table8"type="radio" name="table_selector"> <label for="table8">8</label></div>
            <div class="button"><input id="table9"type="radio" name="table_selector"> <label for="table9">9</label></div>
            <div class="button"><input id="table10"type="radio" name="table_selector"> <label for="table10">10</label></div>
            <div class="button"><input id="table11"type="radio" name="table_selector"> <label for="table11">11</label></div>
            <div class="button"><input id="table12"type="radio" name="table_selector"> <label for="table12">12</label></div>
        </div>
        <div id="search_container" class="content">
            <!--Contents should be generated by PHP-->
            <div id="table1_content">CONTENT1</div>
            <div id="table2_content">CONTENT2</div>
            <div id="table3_content">CONTENT3</div>
            <div id="table4_content">CONTENT4</div>
            <div id="table5_content">CONTENT5</div>
            <div id="table6_content">CONTENT6</div>
            <div id="table7_content">CONTENT7</div>
            <div id="table8_content">CONTENT8</div>
            <div id="table9_content">CONTENT9</div>
            <div id="table10_content">CONTENT10</div>
            <div id="table11_content">CONTENT11</div>
            <div id="table12_content">CONTENT12</div>
        </div>

我想要的是选择内容（即具有表#_content id的内容），当且仅当选中相应的单选按钮输入时（使用id表＃）。

不幸的是，我编写代码的方式，单选按钮被隐藏在两个div（第一个类“按钮”和第二个id“按钮容器”）之下，然后是下一个兄弟div（类“content”），它只包含我想要访问的内容。

由于CSS中没有父选择器，我一直试图弄乱它，看看我是否可以实现它，但看起来不可能。

有什么方法可以使用一些CSS技巧来访问它？我宁愿不删除div，因为我非常使用它们以使我的布局看起来有某种方式。

最终目标基本上是创建一个制表符效果，所以如果我选择一个单选按钮，则会显示内容，所有其他div都设置为不透明度0.我认为这在JavaScript中是可行的，但我不能代码呢。另外，我在某个地方读到，依靠JavaScript来实现功能并不好，因为它可以被禁用。

谢谢！

编辑：

以下是应用了所有html和CSS的代码。您可以将鼠标悬停在标签上，它们会改变颜色。现在的目标是在选择标签时显示内容。

Answer 1

如果您不想使用任何JavaScript，则无法重新组织HTML结构。那example可以帮到你。

仅使用CSS创建选项卡，但某些输入隐藏在两个div下

1 个答案: