时间戳

首页 > 解决方案 > 不使用 HTML 和 CSS 的复选框显示内容（无 JS）

html - 不使用 HTML 和 CSS 的复选框显示内容（无 JS）

问题描述

我在我的 html 页面中以侧面导航方式设置复选框，我希望复选框在选择时显示内容。示例：选择复选框 1,2 仅显示内容，未选中复选框显示所有内容.. 如果没有 Jquery/javascript，我怎么能做到这一点。即使浏览器中的 Javascript 被禁用，我也希望我的网页保持相同的功能。我可以通过包含 w3.css 来做到这一点，因为这些样式是响应式的，而不涉及引导程序

标签： htmlcsscheckbox

解决方案

下面的代码有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>

推荐阅读