Fre*_*zar 33 css list show hide css3
我一直在寻找一个很好的技巧来制作一个隐藏/显示内容或只有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>
在这里演示:http://jsfiddle.net/6W7XD/ 并且它正在工作但不是应该的.问题出在这里:当显示内容时,您可以通过单击"页面上的任意位置"来隐藏它.如何禁用它？如何通过单击隐藏"仅"隐藏内容？先感谢您!
Kev*_*nch 33
我不会使用复选框,我会使用你已经拥有的代码
演示http://jsfiddle.net/6W7XD/1/
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元素才会隐藏文本
Pat*_*lis 17
这会让你大吃一惊:隐藏的单选按钮.
HTML:
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}和CSS:
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
<span>[Hide]</span>
</label>
<input type=radio id="hide" name="group">
<span id="content">Content</span>Mon*_*ime 10
有3个快速示例,纯CSS和没有javascript的内容显示为"点击","维护点击"和第三个"onhover"(所有仅在Chrome中测试).对不起这篇文章,但这个问题是第一个seo结果,也许我的贡献可以帮助像我这样的初学者
我认为(未经测试)但论证"内容"的优点是你可以添加很棒的图标,比如来自Font Awesome(它的\ f-Code)或十六进制图标代替文本"Hide"和"Show"来国际化特技.
示例链接http://jsfiddle.net/MonkeyTime/h3E9p/2/
<style>
label { position: absolute; top:0; left:0}
input#show, input#hide {
display:none;
}
span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
input#show:checked ~ .show:before {
content: ""
}
input#show:checked ~ .hide:before {
content: "Hide"
}
input#hide:checked ~ .hide:before {
content: ""
}
input#hide:checked ~ .show:before {
content: "Show"
}
input#show:checked ~ span#content {
opacity: 1;
font-size: 100%;
height: auto;
}
input#hide:checked ~ span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>
<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show1:before {
content: "Show"
}
#show1:active.show1:before {
content: "Hide"
}
#show1:active ~ span#content1 {
opacity: 1;
font-size: 100%;
height: auto;
}
</style>
<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>
<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show2:before {
content: "Show"
}
#show2:hover.show2:before {
content: "Hide"
}
#show2:hover ~ span#content2 {
opacity: 1;
font-size: 100%;
height: auto;
}
/* extra */
#content, #content1, #content2 {
float: left;
margin: 100px auto;
}
</style>
<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
小智 9
现在（2020 年）您可以使用纯 HTML5 来完成此操作，并且不需要 JavaScript 或 CSS3。
<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>
小智 6
这就是我最近使用的。
的CSS
div#tabs p{display:none;}
div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}
的HTML
<div id='tabs'>
<h2 class="nav-tab-wrapper">
<a href="#tab1" class="nav-tab tab1">Pages</a>
<a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
<a href="#tab3" class="nav-tab tab3">Support</a>
</h2>
<p id='tab1' class='tab1'>Awesome tab1 stuff</p>
<p id='tab2' class='tab2'>Tab2 stuff</p>
<p id='tab3' class='tab3'>Tab3 stuff</p>
</div>
https://jsfiddle.net/hoq0djwc/1/
希望它能对某处有所帮助。
小智 6
我使用一个隐藏的复选框来持久地查看某些消息。该复选框可以隐藏（显示：无）。这是我可以编写的微小代码。
您可以在JSFiddle上查看和测试该演示
HTML：
<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>
CSS：
#show,#content{display:none;}
#show:checked~#content{display:block;}
运行代码段：
<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>
#show,#content{display:none;}
#show:checked~#content{display:block;}
首先，感谢威廉。
第二-我需要一个动态版本。而且有效！
一个例子：
CSS：
p[id^="detailView-"]
{
display: none;
}
p[id^="detailView-"]:target
{
display: block;
}
HTML：
<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>
<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>
| 归档时间： |
|
| 查看次数： |
183032 次 |
| 最近记录： |