gpt4 book ai didi

html - 使用 CSS3 隐藏和显示内容,希望隐藏状态成为默认状态

转载 作者:太空宇宙 更新时间:2023-11-04 14:55:14 25 4
gpt4 key购买 nike

我希望有人能提供帮助。几天来,我一直在尝试让简单的列表在屏幕上显示“隐藏”和“显示”链接时隐藏和显示。我在网上找到了以下内容:

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; } /*this is the switch*/
.hide:focus { display: none; } /*this is the switch*/
.hide:focus ~ #list { display:none; }*/
</style>
</head>

<body>
<p>Here's a list</p>
<div>

<a href="#" class="hide" tabindex="1">[hide]</a>
<a href="#" class="show" tabindex="2">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

</ol>
</div>
</body>
</html>

我希望在您第一次打开页面时隐藏该列表。现在默认状态是显示列表。我从以下网站获得此代码:http://dev.opera.com/articles/view/css3-show-and-hide/

我尝试了文章中一条评论中的建议来反转显示隐藏列表的过程,但它不起作用。这是代码:

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.hide {display: none; }
.show:focus + .hide {display: inline; }
.show:focus { display: none; }
.show:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<p>Here's a list</p>
<div>

<a href="#" class="show">[hide]</a>
<a href="#" class="hide">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<p>How about that?</p>
</body>
</html>

如果有人能提供一个简单的修复方法,我将不胜感激。

谢谢!

最佳答案

尝试下面的代码,我已经更改了 css 以及 anchor 标记的位置

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.hide {display: none; }
#list {display: none; }
.show:focus { display: none; }
.show:focus + .hide {display: inline; }
.show:focus ~#list{ display:block; }


</style>
</head>

<body>
<p>Here's a list</p>
<div>

<a href="#" class="show" tabindex="2">[show]</a>
<a href="#" class="hide" tabindex="1">[hide]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</body>
</html>

关于html - 使用 CSS3 隐藏和显示内容,希望隐藏状态成为默认状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17028862/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com