【jQuery/CSS】要素の表示または非表示
1.CSSには、HTML要素を非表示または表示するためにdisplay、visibilityの2つのスタイルがあります.
1)displayスタイルには複数のタイプの値が選択可能で、デフォルト値はinlineで、非表示にすると要素が占有するページスペースが解放されます(詳細は、「クリックしてリンクを開く」を参照).
2)visibilityスタイルには複数の値が選択可能で、デフォルト値visibleで、非表示にしても要素が占有するページスペースは解放されません(詳細は、クリックしてリンクを開く)
2.jQueryは、表示、非表示、切り替えのためのshow()、hide()、toggle()メソッドをそれぞれ提供します.
これは実はCSSのディスプレー属性を使っています(詳しくは:クリックしてリンクを開く)
非表示と表示:
非表示と表示を切り替えるには、次の手順に従います.
【疑惑】
jQueryはCSSのvisibility属性を実装していないようですか?検証確認を待つ.
【切替効果人土方法実現】
主にこれまでjQueryのマニュアルを調べに来なかったので、CSSでこの切り替えの効果を処理しました.
次はこの比較的土の実現で、切り取って見てみましょう.
1)displayスタイルには複数のタイプの値が選択可能で、デフォルト値はinlineで、非表示にすると要素が占有するページスペースが解放されます(詳細は、「クリックしてリンクを開く」を参照).
style="display: none;"
document.getElementById("div1").style.display="none";//
document.getElementById("div1").style.display="";// 2)visibilityスタイルには複数の値が選択可能で、デフォルト値visibleで、非表示にしても要素が占有するページスペースは解放されません(詳細は、クリックしてリンクを開く)
style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//
document.getElementById("div1").style.visibility="visible";// 2.jQueryは、表示、非表示、切り替えのためのshow()、hide()、toggle()メソッドをそれぞれ提供します.
これは実はCSSのディスプレー属性を使っています(詳しくは:クリックしてリンクを開く)
非表示と表示:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});非表示と表示を切り替えるには、次の手順に従います.
$("button").click(function(){
$("p").toggle();
});【疑惑】
jQueryはCSSのvisibility属性を実装していないようですか?検証確認を待つ.
【切替効果人土方法実現】
主にこれまでjQueryのマニュアルを調べに来なかったので、CSSでこの切り替えの効果を処理しました.
次はこの比較的土の実現で、切り取って見てみましょう.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="No-Cache">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function() {
var projectSwitchFlag = false;
var originalPicImgSrc = $('#pic').attr('src');
$('#pic').click(function(){
if(projectSwitchFlag == false) {
$(".sort").css('visibility', 'hidden');
originalPicImgSrc = $('#pic').attr('src');
$('#pic').attr('src', 'img/f5/project.jpg');
projectSwitchFlag = true;
}
else {
$(".sort").css('visibility', 'visible');
$('#pic').attr('src', originalPicImgSrc);
projectSwitchFlag = false;
}
});
});
</script>
</head>
<body>
<div class="detail">
<div class="sort">
<div class="grid">
<img height="100%" id="sort_grid_pic" alt="" src="img/f5/sort_grid1.jpg" />
</div>
<div class="list">
<img height="100%" id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" />
</div>
</div>
<div><img width="830px" id="pic" alt="" src="img/f5/content_grid.jpg" /></div>
</div>
<div class="personal_content">
<img height="100%" width="100%" id="personal_content_pic" alt="" src="img/f5/content_personal.jpg"/>
</div>
</body>
</html>