クリックするdivを別のdivに置き換えて表示する(jQuery)

2

例えば、特定の要素のdivをクリックしたときに、元のdivを隠し、他のdivを表示する場合があります。 この場合に使用できるjQueryの例を紹介します。 原理は、最初のロード時には、最初のdivを表示し、第二のdivを隠したが、第二divをクリックすると、最初のdivを非表示に第二のdivを表示するようにします。

HTMLコード:

<div class="show1">
<span>첫 번째 DIV</span>
</div>
<div class="show2">
<span>두 번째 Div</span>
</div>

jQueryコード:

$(document).ready(function() {
$('.show1').show(); //페이지를 로드할 때 표시할 요소
$('.show2').hide(); //페이지를 로드할 때 숨길 요소
$('.show1').click(function(){
$ ('.show1').hide(); //클릭 시 첫 번째 요소 숨김
$ ('.show2').show(); //클릭 시 두 번째 요소 표시
return false;
});
});

デモ

参考までに WordPressで利用するには、 WordPress テーマの関数ファイル(functions.php)のjsファイルを登録する必要があります。 WordPressこの操作をenqueueと呼ばれます。 enqueueの詳細については、 ここを参照してください。

メモ:

2のコメント

    • こんにちは、バクインヒョ様。

      ブログを訪問していただきありがとうございます。 楽しい休日を過ごしてください🙂

コメントを残す

コメントを入力してください!
名前を入力してください