当前位置：文江博客话题详情

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

发布于 2024-11-07 02:35:47 字数 216 浏览 5 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花细雨 2024-11-14 02:35:47

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

这是一篇出色的文章，可以完全满足您的要求：

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

希望对某人有所帮助！

回复收藏 0 原文

心安伴我暖 2024-11-14 02:35:47

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

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 那样提供元素的行为。

You can view the code on that page to see how it's happening:

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
}

However, I wouldn't recommend doing this because it's almost a hack of CSS to do things like this. CSS should be used for styling your elements to give a look and feel; NOT for providing behavior of elements like javascript is for.

回复收藏 0 原文

烏雲後面有陽光 2024-11-14 02:35:47

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

基本上，您需要将内容放入链接中，当链接不活动时隐藏它，但如果链接活动则显示。

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

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

回复收藏 0 原文

过气美图社 2024-11-14 02:35:47

您可以使用 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>

这再次使用活动选择器。

You can use CSS:

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

The active selector lets CSS detect when the user clicks on an HTML element. In this example, when the element is clicked, it sets the opacity to 0, which means it's transparent. Or, if you want it to really hide, do this:

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

This again uses the active selector.

回复收藏 0 原文

~没有更多了~