「JQuery」の版間の差分
提供: sha.ngri.la
(ページの作成:「==ボタンをクリックすると表示が切り替わる== <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $...」) |
細 (→ボタンをクリックすると表示が切り替わる) |
||
| 1行目: | 1行目: | ||
==ボタンをクリックすると表示が切り替わる== | ==ボタンをクリックすると表示が切り替わる== | ||
| + | <code>toggle</code>のボタンをクリックすると、「こんにちは」と「さよなら」が切り替わる。 | ||
<html> | <html> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | ||
| 14行目: | 15行目: | ||
<p class="toggle" style="display: none">さよなら</p> | <p class="toggle" style="display: none">さよなら</p> | ||
</html> | </html> | ||
| + | <pre> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | ||
| + | <script> | ||
| + | $(function(){ | ||
| + | $("button").click(function () { | ||
| + | $("p.toggle").toggle(); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <button>Toggle</button> | ||
| + | <p class="toggle">こんにちは</p> | ||
| + | <p class="toggle" style="display: none">さよなら</p> | ||
| + | </pre> | ||
2015年4月10日 (金) 19:31時点における版
ボタンをクリックすると表示が切り替わる
toggleのボタンをクリックすると、「こんにちは」と「さよなら」が切り替わる。
こんにちは
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function () {
$("p.toggle").toggle();
});
});
</script>
<button>Toggle</button>
<p class="toggle">こんにちは</p>
<p class="toggle" style="display: none">さよなら</p>