ホームページ > 記事 > ウェブフロントエンド > jsを使用してクリック時にボタンを非表示にしたり表示したりするにはどうすればよいですか?
jsを使用してクリック時にボタンを非表示にしたり表示したりするにはどうすればよいですか?
- 藏色散人オリジナル
- 2018-08-06 14:55:4623407ブラウズ
この記事では、ユーザーエクスペリエンスをより便利にする、ボタンをクリックしたときの非表示と表示の効果をjsを使用して実現する方法を主に紹介します。
注: jQuery は、Prototype に次ぐ優れた JavaScript コード ライブラリ (または JavaScript フレームワーク) であり、高速で簡潔な JavaScript フレームワークです。 jQuery の設計の目的は、「書く量を減らし、より多くのことを行う」、つまりコードを書く量を減らし、より多くのことを行うことを意味します。一般的な JavaScript 関数コードをカプセル化し、シンプルな JavaScript 設計パターンを提供し、HTML ドキュメント操作、イベント処理、アニメーション設計、および Ajax インタラクションを最適化します。
js は、ボタンをクリックしたときの非表示と表示の効果を実装します。具体的なコード例は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，就会消失，点击“显示”就会出现。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>ローカルのデモ用に上記のコードを直接コピーできます。この記事の紹介が皆様のお役に立てば幸いです。
【おすすめ関連記事】
jQueryは、ページを初めて実行するときにデフォルトでクリックイベントをトリガーします
JQueryはクリックイベントをシミュレートし、自動的にイベントをトリガーします
jQueryのホバーイベントとクリックイベント間の競合の詳細な説明(写真)
以上がjsを使用してクリック時にボタンを非表示にしたり表示したりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。