JavaScript での Div onClick の表示/非表示
この記事では、CSS または onclick() 関数を使用して、JavaScript で HTML div を表示および非表示にする方法について説明します。
CSS を使用した HTML div の表示と非表示
div は、Web ページのセクションまたは分割を定義するための HTML のタグおよび要素であり、div タグ内に任意のコンテンツを追加することもできます。 div は HTML の要素のコンテナーとして使用され、CSS で割り当てられ、JavaScript でカスタマイズできます。
CSS の :target キーワードを使用して div セクションを切り替えることができます。 :target キーワードは、ターゲット要素である HTML 要素にリンクされており、そのプロパティを変更できます。要素をクリックすると、プロパティが適用されます。
たとえば、リンクをクリックすると、特定の div を表示できます。 3つの div 要素があり、特定のリンクがクリックされたときにそれらを表示したい例を考えてみましょう。
以下のコード例と出力を参照してください。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
<style>
#html-show-hide,
#css-show-hide,
#js-show-hide {
display: none;
}
#html-show-hide:target,
#css-show-hide:target,
#js-show-hide:target {
display: block;
}
</style>
</head>
<body>
<!--Nav-Bar-->
<a href="#html-show-hide">Show HTML</a>
<a href="#css-show-hide">Show CSS</a>
<a href="#js-show-hide">Show JS</a>
<!--HTML-->
<div class="html" id="html-show-hide">
<p class="text-html" id="htmlContent">HTML div..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show-hide">
<p class="text-css" id="cssContent">CSS div..
</p>
</div>
<!--JS-->
<div class="js" id="js-show-hide">
<p class="text-js" id="jsContent">JS div..
</p>
</div>
</body>
</html>
出力：
上記のコードでは、CSS の display プロパティを使用して div 要素を表示および非表示にしています。 div セクションを非表示にする場合は、display を none に設定し、セクションを表示する必要があります。 display を block に設定する必要があります。
body タグ内に、3つの div 要素と、クリックすると特定の div を表示する 3つのリンクを作成しました。 各 div は、href 属性を使用した個別のリンクで攻撃されます。
リンクをクリックすると、href 属性が CSS 属性 target をトリガーし、target 属性に関連付けられた名前を持つ要素のプロパティを変更します。 上記のコードでは、style タグを使用して HTML ファイル内に CSS を記述しましたが、別の CSS ファイルを作成してリンクすることもできます。
上記の出力では、2 番目のリンクをクリックしたため、CSS div である div が 1つだけ表示されます。別のリンクをクリックすると、現在表示されている div が非表示になり、新しい div がページに表示されるようになります。
onclick() 関数と JavaScript を使用した HTML div の表示と非表示
上記の例では、CSS の target 属性を使用してクリックの応答をトリガーしましたが、onclick() 関数を使用して、JavaScript ファイルまたは script 内で指定された関数を呼び出すこともできます。 HTML のタグと関数内のコードが実行されます。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
</head>
<body>
<button onclick="showHide()">Show hide</button>
<div class="html" id="show-hide">
<p>HTML div..
</p>
</div>
<script>
const element = document.getElementById("show-hide");
function showHide() {
if (element.style.display === "none") {
element.style.display = "block"; // to show the element
} else {
element.style.display = "none"; // to hide the element
}
}
</script>
</body>
</html>
ショー付きの出力：
非表示で出力:
上記の HTML コードでは、id show-hide を持つ div セクションと、script タグ内にある JavaScript の showHide() 関数を呼び出すボタンを作成しました。 showHide() 関数では、document.getElementById() 関数を使用して div 要素を取得します。
まず、if-else ステートメントを使用して、style.display 属性を使用して div の可視性をチェックしました。display プロパティが none に設定されている場合は、それを次のように設定する必要があります。 block であり、block に設定されている場合は、none に設定する必要があります。 上記の出力では、指定された div を切り替えるボタンを確認できます。
div が非表示の場合、ボタンを押すと表示されます。 div が表示されている場合、ボタンを押すと非表示になります。
上記のコードでは、script タグを使用して JavaScript コードを HTML ファイル内に記述しましたが、JavaScript ファイルを作成して HTML ファイルにリンクすることもできます。
