使用HTML / CSS

Question

我试图找出一种方法来链接特定复选框以显示/隐藏特定 div元素。

我能够找到显示/隐藏紧接在>下方的Div元素的复选框的代码，但我想知道是否有将特定复选框链接到的方法我选择的任何div。

在我的代码中，我基本上试图找出如何制作[cb1]或[cb2]切换（显示/隐藏）＆＃34; divMenu3＆＃34; 。< / p>

我在各种论坛上发现了几个帖子，基本上说我需要Javascript才能实现这一点，但是在HTML / CSS中真的没有简单的方法吗？

我是一个初学者。
任何建议都会受到超级赞赏！

完整代码：https://pastebin.com/vg1TS171

CSS：

    input:checked + #divMenu1 {
        display: none;
    }

    input:checked + #divMenu2 {
        display: none;
    }

    input:checked + #divMenu3 {
        display: none;
    }

HTML：

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1>

<div id="divMenu1">
    This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2>

<div id="divMenu2">
    This is divMenu2.
</div>

<hr />


<!--Third Menu-->
<div id="divMenu3">
    This is divMenu3.
</div>

<hr />

Answer 1

您可以使用General sibling combinator ~：

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}


/** check both to show divMenu3 **/

#cb1:not(:checked)~#divMenu3,
#cb2:not(:checked)~#divMenu3 {
  display: none;
}

<!--First Menu-->
<label for="cb1">[cb1]</label>
<input type="checkbox" style="display: none" id="cb1">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />

<!--Second Menu-->
<label for="cb2">[cb2]</label>
<input type="checkbox" style="display: none" id="cb2">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />

Answer 2

这将是JavaScript解决方案：

＆＃13;

＆＃13;

function toggle(id) {
  var ele = document.getElementById(id);
  if (ele)
    ele.style.display = ele.style.display === "none" ? "initial" : "none";
}

＆＃13;

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}

input:checked+#divMenu3 {
  display: none;
}

＆＃13;

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1 onclick="toggle('divMenu3')">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2 onclick="toggle('divMenu3')">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />

＆＃13;

＆＃13;

＆＃13;