如何在开始时创建带有隐藏内容的标签，仅在您点击时才显示？

问题描述：

使用css + html只创建一个点击展开标签页？如何在开始时创建带有隐藏内容的标签，仅在您点击时才显示？

显示一些代码，做一些研究，参见[求助]（HTTPS ：//stackoverflow.com/help）和[如何问]（https://stackoverflow.com/help/how-to-ask） – M0ns1f

欢迎来到Stack Overflow！预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

答

这个例子将告诉你如何去这样做：

body { 
 
    display: block; 
 
} 
 
.span3:focus ~ .alert { 
 
    display: none; 
 
} 
 
.span2:focus ~ .alert { 
 
    display: block; 
 
} 
 

 
.table{ 
 
    width:400px; 
 
    height:200px; 
 
    margin:50px auto; 
 
} 
 
.alert{ 
 
    width:100%; 
 
    height:40px; 
 
    background:#e74c3c; 
 
    text-align:center; 
 
    line-height:40px; 
 
    color:#fff; 
 
    border-bottom:1px solid #fff; 
 
    display:none; 
 
} 
 
.row{ 
 
    width:100%; 
 
    height:40px; 
 
    background:#e74c3c; 
 
    text-align:center; 
 
    line-height:40px; 
 
    color:#fff; 
 
    border-bottom:1px solid #fff; 
 
} 
 
.span3, .span2{ 
 
    padding:5px 7px; 
 
    border:2px solid #e74c3c; 
 
    color:#e74c3c; 
 
    cursor:pointer; 
 
}

<div class="table"> 
 
    <span class="span3" tabindex="0">Hide Me</span> 
 
    <span class="span2" tabindex="0">Show Me</span> 
 
    <br><br> 
 
    <div class="row"> 
 
    #1 
 
    </div> 
 
    <div class="row"> 
 
    #2 
 
    </div> 
 
    <div class="alert"> 
 
    #3 
 
    </div> 
 
</div>

这里有一个小提琴：http://jsfiddle.net/6W7XD/6618/

如何在开始时创建带有隐藏内容的标签，仅在您点击时才显示？

相关推荐