隐藏仅显示CSS的显示内容列表，不使用JavaScript
我一直在寻找一个很好的技巧，使隐藏/显示内容或仅具有CSS而没有javascript的列表。我已成功执行此操作：
<!DOCTYPE html>
<head>
<style>
#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}
</style>
</head>
<body>
<div>
<a href="#show"class="show">[Show]</a>
<a href="#hide"class="hide">/ [Hide]</a>
<div id="cont">Content</div>
</div>
</body>
</html>
并且它正在工作，但没有达到应有的效果。这是问题所在：显示内容时，您可以通过单击“页面上的任何位置”将其隐藏。如何禁用它？如何通过单击“隐藏”隐藏内容“仅”？先感谢您！
问题答案：
我不会使用复选框，而是使用您已经拥有的代码
CSS
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert{display:none;}
HTML
<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>
这样，仅在单击hide元素时隐藏文本
-
问题内容： 我想显示一个带有控件的基本html表，以切换其他列的显示/隐藏： 因此，默认情况下，列1和列2将是唯一显示的列-但是，当您单击列1时，我希望1a和1b切换，与列2和2a和2b相同。我可能最终会有更多的列和很多行- 因此，当我进行测试时，任何JavaScript循环方法都太慢而无法使用。 似乎足够快的唯一方法是设置一些CSS，如下所示： 然后在表标题单元格上设置onClick函数调用，这
-
问题内容： 是否可以隐藏元素的内容，但保持其内容可见？说我有以下代码： HTML： CSS： 我试过了： 使用和设置为，但两者均仍处于隐藏状态 使用;，但随后似乎增加了额外的空间（？） 使用颜色：透明；但是，当然，跨度的内容仍会占用空间 使用，但是 这被搜索引擎和 似乎不适用于span元素（？） 关于如何执行此操作还有其他想法吗？ 问题答案： 您可以使用，但是使用此解决方案，隐藏的内容仍然 会占用
-
问题内容： 我有一个菜单和三个隐藏的div，这些div取决于用户选择的选项。我只想使用CSS来显示/隐藏它们。我现在正在使用jquery，但我希望禁用js即可访问它。此处有人为其他人提供了此代码，但仅在div：hover或div：active时有效，当我将其更改为div：visited时它不起作用。我是否需要添加某些内容，或者这不是正确的方法？感谢您的帮助:) 问题是我的客户希望菜单被选中时此di
-
问题内容： 我有一个包含几列的HTML表，我需要使用jquery实现一个列选择器。当用户单击复选框时，我要隐藏/显示表中的相应列。我想在不将类附加到表中的每个td的情况下执行此操作，是否可以使用jquery选择整个列？以下是HTML的示例。 问题答案： 我想做到这一点而不必在每个td上附加一个类 就个人而言，我会采用“每课时听课/课时/上课”的方法。然后，您可以通过对容器上的className的一
-
我有一个桌子，它的膨胀和折叠，但它变得太乱，无法使用它，IE和Firefox不能正常工作。 下面是JavaScript代码： 和示例HTML： 问题是，我对每一个都使用一个ID，这是非常烦人的，因为我想为每个父级和很多父级都有很多隐藏行，所以要处理的ID太多了。IE和FireFox只显示第一个隐藏行，而不显示其他行。我怀疑发生这种情况是因为我将所有ID触发在一起使其工作。我认为如果我使用类而不是I
-
在React JS组件中，我正在渲染一个项目列表（食谱），使用来自数组的JS映射函数，从应用程序父组件传入。每个项目都有一个子列表（配料），同样使用地图功能呈现。 我想要的是，当你点击菜谱标题时，显示/隐藏配料的子列表。我在标题上使用了onClick函数，将CSS设置为显示none或block，但出现以下错误： 无法读取未定义的属性openRecipe 这是我的代码： 另外，我试图在这里使用CSS