説明:
テキストの段落をクリックして、テキストを赤に変更します。もう一度クリックした後、テキストは黒に戻ります。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> jQuery Test </title>
<スクリプトsrc = "jquery-1.11.1.min.js"> </scrip>
<style type = "text/css">
。赤
{
色:赤;
}
</style>
</head>
<body>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<script type = "text/javascript">
$( "p")。クリック(function(){
if($(this).hasclass( "red")){//このクラスがあるかどうかを判断します
$(this).removeclass( "red");
}それ以外{
$(this).addclass( "red");
}
})
</script>
</body>
</html>
これはクラスの交互のプロセスであるため、Toggleclassメソッドを使用できます。対応するクラス:「赤」が存在する場合、削除されます。存在しない場合は追加されます。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> jQuery Test </title>
<スクリプトsrc = "jquery-1.11.1.min.js"> </scrip>
<style type = "text/css">
。赤
{
色:赤;
}
</style>
</head>
<body>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<p>学習は現在の航海のようなものです。前進しないと退却します</p>
<script type = "text/javascript">
$( "p")。クリック(function(){
$(this).toggleclass( "red");
})
</script>
</body>
</html>