ある特定の要素にクラスの追加、削除をするのは、いたって簡単。
jQuery日本語リファレンスのaddClass
と
jQuery日本語リファレンスのremoveClass
を参考に、まずは、クラスを追加するプログラムを作ってみる。
<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}
</style>
</head>
<body>
<div>apple</div>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
$("#hoge").bind(
'click'
, function(){
$("div").addClass("foo");
}
);
</script>
</body>
</html> |
こいつを実行すると、fooクラスが適用されます。
(文字が赤くなります。)
一方で、クラスの削除はこのようになります。
<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}
</style>
</head>
<body>
<div class="foo">apple</div>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
$("#hoge").bind(
'click'
, function(){
$("div").removeClass("foo");
}
);
</script>
</body>
</html> |
これを実行すると、元々赤文字だったappleがクラスが削除されることによって黒文字に変更されます。
今回もわりと簡単だったなー。
0 コメント:
コメントを投稿