Question

我正在html页面中以侧面导航方式设置复选框，我希望复选框在选择时显示内容。示例：选择复选框1,2仅显示其中的内容，未选中复选框不显示所有内容。.如何在没有Jquery / javascript的情况下执行此操作。我希望即使禁用浏览器中的Javascript，网页也能保持相同的功能。我可以通过包含w3.css来做到这一点吗，因为这些样式具有响应性，而无需使用引导程序

Answer 1

下面的代码中，id具有不同的checkbox，并且其中contents的存在，将在显示内容的任何checkbox上单击：

#content {
  display: none;
}

#show:checked ~ #content {
  display: block;
 }
  
#content1 {
  display: none;
}

#show1:checked ~ #content1 {
  display: block;
  }

<input type="checkbox" id="show">
<label for="show">check1</label>|
<input type="checkbox"id="show1">
<label for="show1">check2</label>


<span id="content">jvdkvdkvjdl</span>

 

<span id="content1">dkjvvhjvhkjdklhdlvk</span>

Answer 2

我建议您学习“：checked”选择器。这是一个简单的例子。

HTML

<label for="trigger">Toggle box</label>
<div>
    OTHER HTML CONTENT
</div>
<input id="trigger" type="checkbox">
<div class="box">
  SHOW / HIDE BOX
</div>

CSS

.box {
  display: none;
  background: #ccc;
  width: 200px;
  height: 100px;
}

#trigger {
  display: none;
}

#trigger:checked + .box {
  display: block;
}

如您所见，“：checked”选择器可以显示或隐藏DIV块。这是与此主题相关的interesting article。

复选框显示内容，不使用HTML和CSS（不使用JS）

2 个答案: