
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.04.10
jQuery では、CSS で display プロパティを設定して HTML 要素の表示・非表示を切り替えることができます。
また、hide メソッドやshow メソッド、visibility プロパティを使用して HTML 要素の表示・非表示を切り替えることもできます。
今回は、jQuery で HTML 要素の表示・非表示を切り替えるサンプルを紹介します。
jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル(本ページ)
1.display で表示・非表示
2.hide と show で表示・非表示
3.visibility で表示・非表示
jQuery で CSS の display プロパティを変更して、HTML 要素の表示・非表示を切り替えます。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#nonBtn").click(function() { // 非表示に設定 $("#pinkBox").css("display", "none"); }); $("#blockBtn").click(function() { // 表示に設定 $("#pinkBox").css("display", "block"); }); $("#nonBtn2").click(function() { // 非表示に設定 $("#purpleBox").css("display", "none"); }); $("#blockBtn2").click(function() { // 表示に設定 $("#purpleBox").css("display", "block"); }); $("#nonBtn3").click(function() { // 非表示に設定 $("#blueBox").css("display", "none"); }); $("#blockBtn3").click(function() { // 表示に設定 $("#blueBox").css("display", "block"); }); }); //--> </script> <div style="background-color:#CCC; display:inline-flex; align-items: center; "> <div style="display:inline-block; vertical-align: middle;"> <div id="pinkBox" style="background-color:pink; height:70px"> </div> <input type="button" id="nonBtn" value="非表示"> <input type="button" id="blockBtn" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="purpleBox" style="background-color:orchid; height:70px"> </div> <input type="button" id="nonBtn2" value="非表示"> <input type="button" id="blockBtn2" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="blueBox" style="background-color:skyblue; height:70px"> </div> <input type="button" id="nonBtn3" value="非表示"> <input type="button" id="blockBtn3" value="表示"> </div> </div>
今度は hide メソッド と show メソッドを使って、上のサンプルと同様の動き( HTML 要素の表示・非表示の切り替え )を行います。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#hideBtn").click(function() { // 非表示に設定 $("#pinkBox").hide(); }); $("#showBtn").click(function() { // 表示に設定 $("#pinkBox").show(); }); $("#hideBtn2").click(function() { // 非表示に設定 $("#purpleBox").hide(); }); $("#showBtn2").click(function() { // 表示に設定 $("#purpleBox").show(); }); $("#hideBtn3").click(function() { // 非表示に設定 $("#blueBox").hide(); }); $("#showBtn3").click(function() { // 表示に設定 $("#blueBox").show(); }); }); //--> </script> <div style="background-color:#CCC; display:inline-flex; align-items: center;"> <div style="display:inline-block; vertical-align: middle;"> <div id="pinkBox" style="background-color:pink; height:70px"> </div> <input type="button" id="hideBtn" value="非表示"> <input type="button" id="showBtn" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="purpleBox" style="background-color:orchid; height:70px"> </div> <input type="button" id="hideBtn2" value="非表示"> <input type="button" id="showBtn2" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="blueBox" style="background-color:skyblue; height:70px"> </div> <input type="button" id="hideBtn3" value="非表示"> <input type="button" id="showBtn3" value="表示"> </div> </div>
display プロパティや hide メソッドを使用したサンプルは HTML 要素を非表示にした場合に 要素分のスペースが削除されましたが、visibility プロパティを使用するとスペースを確保したまま HTML 要素が非表示となります。
次のサンプルでは、jQuery で CSS の visibility プロパティを変更して、HTML 要素の表示・非表示を切り替えます。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#hidBtn").click(function() { // 非表示に設定 $("#pinkBox").css("visibility", "hidden"); }); $("#visiBtn").click(function() { // 表示に設定 $("#pinkBox").css("visibility", "visible"); }); $("#hidBtn2").click(function() { // 非表示に設定 $("#purpleBox").css("visibility", "hidden"); }); $("#visiBtn2").click(function() { // 表示に設定 $("#purpleBox").css("visibility", "visible"); }); $("#hidBtn3").click(function() { // 非表示に設定 $("#blueBox").css("visibility", "hidden"); }); $("#visiBtn3").click(function() { // 表示に設定 $("#blueBox").css("visibility", "visible"); }); }); //--> </script> <div style="background-color:#CCC; display:inline-flex; align-items: center; "> <div style="display:inline-block; vertical-align: middle;"> <div id="pinkBox" style="background-color:pink; height:70px"> </div> <input type="button" id="hidBtn" value="非表示"> <input type="button" id="visiBtn" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="purpleBox" style="background-color:orchid; height:70px"> </div> <input type="button" id="hidBtn2" value="非表示"> <input type="button" id="visiBtn2" value="表示"> </div> <div style="display:inline-block; vertical-align: middle;"> <div id="blueBox" style="background-color:skyblue; height:70px"> </div> <input type="button" id="hidBtn3" value="非表示"> <input type="button" id="visiBtn3" value="表示"> </div> </div>
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.