リンクをクリックすると、テキストが指定された位置に表示されて戻ってリンクをクリックすると、消える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(); }); });
実行例:
(出典: stackoverflow.com)
参考に、時間を節約したい場合 WordPress プラグインは、jQueryテンプレートなどを販売している CodeCanyonで低コストにはJavaScript / jQueryのテンプレートは、PHPスクリプトなどのコード、スクリプトを購入して使用することができます。 現在、28,500以上のアイテムが販売されています。

コメントを残す