如何在開始時創建帶有隱藏內容的標籤，僅在您點擊時才顯示？

-3

使用css + html只創建一個點擊展開標籤頁？如何在開始時創建帶有隱藏內容的標籤，僅在您點擊時才顯示？

2017-10-28 wodeshou

顯示一些代碼，做一些研究，參見[求助]（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/

來源

2017-10-28 18:55:03

如何在開始時創建帶有隱藏內容的標籤，僅在您點擊時才顯示？

回答

相關問題