如何在没有 javascript 的情况下隐藏和显示文本答案

【问题标题】：How to hide and show text without javascript如何在没有 javascript 的情况下隐藏和显示文本
【发布时间】：2011-05-11 16:49:13
【问题描述】：

如何在不使用 javascript 的情况下隐藏和显示文本？我知道使用 javascript 会容易得多，但在这种情况下我不能。

我正在寻找这样的东西：http://www.pmob.co.uk/temp/hideandshow3-css.htm

【问题讨论】：

看那个网站的源码。
你看demo的源码了吗？如果是这样，您到底对什么感到困惑？

标签： javascript hide show-hide

【解决方案1】：

您可以查看该页面上的代码以了解它是如何发生的：

ul.hshow li a:focus span, ul.hshow li a:active span {
display:block;
border:5px solid red;
text-align:left;
padding:5px;
height:auto;
overflow:visible;
position:relative;
left:auto
}

但是，我不建议这样做，因为这样做几乎是对 CSS 的一种破解。应该使用 CSS 来设置元素的样式以赋予外观和感觉；不是为了提供像 javascript 这样的元素的行为。

【讨论】：

【解决方案2】：

老实说，我不知道为什么有些人想成为代码势利小人，但你的方法没有错。我必须为没有启用 javascript 的人编写代码，因此利用 CSS 非常有意义……利用它的潜力并不是一种黑客行为。

这是一篇出色的文章，可以完全按照您的意愿行事：

https://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php

希望对某人有所帮助！

【讨论】：

我对您的链接感兴趣，但它不再存在。我想制作一个隐藏侧边栏文本块的 EPUB，但我找不到一个支持 Javascript 的免费 EPUB 阅读器。
@Bulrush 似乎他们重做了他们的网站，现在它是一个 php 页面。我已经在上面更新了。

【解决方案3】：

它使用 a:active 属性来显示这些文本。

基本上，你需要把你的内容放在你的链接中，当链接不活跃时隐藏它，如果它是活跃的就显示出来。

问题是点击任何链接都会隐藏当前显示的内容，并且选项卡链接将被视为“点击”。

使用它并不是一个好主意。使用 a:hover 会更好。

【讨论】：

【解决方案4】：

你可以使用 CSS：

<!DOCTYPE html>
    <html>
        <body>
    <h1>Click Me!</h1>
    </body>
    <style>
    h1:active {
       opacity: 0;
    }
    </style>
    </html>

active 选择器让 CSS 检测用户何时点击 HTML 元素。在此示例中，当单击元素时，它将不透明度设置为 0，这意味着它是透明的。或者，如果您希望它真正隐藏，请执行以下操作：

<!DOCTYPE html>
    <html>
        <body>
    <h1>Click Me!</h1>
    <p>I am Bob.</p>
    </body>
    <style>
    h1:active {
       display: none;
    }
    </style>
    </html>

这再次使用了活动选择器。

【讨论】：