[英]How to show and hide a section?
我想顯示所選 HTML 鏈接的 div。
例如:
我點擊了 html 鏈接Categories <div id="categories" ... >
將顯示,其他 div 將隱藏。
HTML
<div id="col-navigation">
<ul>
<li>
<a href="#"> Quizzes </a>
</li>
<li>
<a href="#"> Categories </a>
</li>
<li>
<a href="#"> Jump </a>
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
使用上面的代碼使其工作。
工作小提琴: https : //jsfiddle.net/z4bprass/1/
你可以使用css
:target
,一般的兄弟姐妹選擇器~
:target { display: block !important; } :target ~ div[id] { display: none; }
<div id="col-navigation"> <ul> <li> <a href="#quizzes"> Quizzes </a> </li> <li> <a href="#categories"> Categories </a> </li> <li> <a href="#jump"> Jump </a> </li> </ul> </div> <div> <div id="categories" style="display:none"> Categories! </div> <div id="jump" style="display:none"> Jump! </div> <div id="quizzes">//default showed Quizzes! </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.