ベストセラー人気 WordPress テーマTop 30 詳細

クリック時のテキストを表示/非表示jQuery

Last Updated:2019年4月16日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

リンクをクリックすると、テキストが指定された位置に表示されて戻ってリンクをクリックすると、消えるjQueryのコードサンプルです。

コード:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function () {
// text로 시작하는 모든 id를 숨김
$("[id^=text]").hide();

// 클래스가 일치하는 버튼을 가지지만, float_l 클래스가 아닌 요소
$(".button:not(.float_l)").click(function (e) {
e.stopPropagation();

// index가 클릭한 것과 일치하는 요소를 찾음
$("[id^=text]").eq($(this).index()).toggle();
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>

<div class="button">
<div class="button float_l"><a href="#">자세히 1..</a></div>
</div>
<div class="button">
<div class="button float_l"><a href="#">자세히 2..</a></div>
</div>
<div class="button">
<div class="button float_l"><a href="#">자세히 3..</a></div>
</div>
<p>
<div id="text1">문장 1 - 자세히 1을 클릭할 때 표시</div>
</p>
<p>
<div id="text2">문장 2 - 자세히 2를 클릭할 때 표시</div>
</p>
<p>
<div id="text3">문장 3 - 자세히 3을 클릭할 때 표시</div>
</p>

</body>

たとえば、「詳細1」をクリックするとclassがtext1に対応するテキストが表示され、もう一度「詳細1」をクリックするとテキストが消えます。 上記では、クリックするテキスト部分のdiv要素を見ると、 と同じですが、この部分を(1番目のテキストリンク部分はdata-rel=”2″…)に置き換えて、jQueryコード部分を次のように使用しても結果は同じです。

$(function () {
// Hide all elements which id starts with text.
$("[id^=text]").hide();

$(".button").click(function () {
$("#text" + $(this).data("rel")).toggle();
});
});

実行例:
Show Hide text jQuery sample(出典: stackoverflow.com)

参考に、時間を節約したい場合 WordPress プラグインは、jQueryテンプレートなどを販売している CodeCanyonで低コストにはJavaScript / jQueryのテンプレートは、PHPスクリプトなどのコード、スクリプトを購入して使用することができます。 現在、28,500以上のアイテムが販売されています。

コードキャニオンで販売されているjavascript / jQueryテンプレート
CodeCanyonで販売されているjavascript / jQueryテンプレート

メモ:



コメントを残す

コメント