Question

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

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

Answer 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这样的元素的行为。

Answer 2

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

这是一篇精彩的文章，可以完全按照您的要求进行操作：

http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.htm

希望能帮助别人！

Answer 3

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

基本上，您需要将内容放在链接中，当链接未处于活动状态时隐藏它，但显示它是否处于活动状态。

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

使用它并不是一个好主意。使用a：悬停会更好。

Answer 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>

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

如何隐藏和显示没有JavaScript的文本

4 个答案: