今回の記事の内容
- クリックイベントで非表示になっていた文字列の表示方法
- クリックイベントで表示されていた文字列を非表示に
- クリックする度に表示⇄非表示
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div id="txt" class="txt">Push!!</div>
<div id="ci-txt" class="ci-txt">Hello World！</div>
<script src="src/index.js"></script>
</body>
</html>
.txt {
margin-bottom: 20px;
}
.ci-txt {
display: none;
}
Push!!の文字列をクリックしたら赤枠に文字列を表示させます
※CSSで非表示にさせてます
クリックで文字を表示
displayプロパティ block JavaScript
<meta charset="utf-8"><meta charset="utf-8">displayプロパティ block
obj.style.display = "block";
document.getElementById("txt").addEventListener("click", () => {
document.getElementById("ci-txt").style.display = "block";
});
push!!の文字列をクリックしたら赤枠に非表示だった文字列が表示されるようになりました
show()メソッド jQuery
<meta charset="utf-8">show()
$(selector).show();
$(function () {
$(".txt").click(function () {
$(".ci-txt").show();
});
});クリックで文字を非表示
.txt {
margin-bottom: 20px;
}
/* .ci-txt {
display: none;
} */.ci-txtのcssのスタイルはコメントアウトにしておきます
displayプロパティ none JavaScript
<meta charset="utf-8">displayプロパティ none
obj.style.display = "none";
document.getElementById("txt").addEventListener("click", () => {
document.getElementById("ci-txt").style.display = "none";
});hide()メソッド jQuery
<meta charset="utf-8">hide()
$(selector).hide();
$(function () {
$(".txt").click(function () {
$(".ci-txt").hide();
});
});クリックの度に文字列の表示⇄非表示イベント
document.getElementById("txt").addEventListener("click", () => {
const ciTxt = document.getElementById("ci-txt");
if (ciTxt.style.display == "none") {
ciTxt.style.display = "block";
} else {
ciTxt.style.display = "none";
}
});jQuery おすすめ書籍
| jQuery最高の教科書 | ||||
|
