「付箋のようにクリックORタップしたら透過する仕組みを作る2」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[付箋のようにマウスを載せたら剥がされる仕組みを作る1]]ではCSSのみで実装していましたが、今回はjQueryも使って実装していきます。11月13日記事
~
~
イメージ
~
クリックする前
クリックした後
~
~
目次
#contents
~
~
----
~
*概要
今度はjQueryのclickイベントを使って行っていきます。
~
~
*コード
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$(".husen").click(function(){
$(this).css('display','none');
});
});
</script>
<title>jQueryでタップやマウスを載せたら消える付箋</title>
</head>
<body>
<div id="wrapper">
<section class="photo">
</section>
<section class="words">
<dl>
<dt>aaaaa</dt><dd>bbbbbb</dd>
</dl>
<p class="husen">click or tap</p>
</section>
<section class="comment">
<p>コメントコメントコメントコメントコメントコメント</p>
</section>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding: 20px;
border:1px solid #000;
width:480px;
min-height: 400px;
}
section.photo{
margin:10px auto;
width:480px;
height:320px;
background: #FCC;
}
section.words{
position:relative;
}
section.words dl{
margin:10px auto;
width:480px;
background: #cfc;
}
section.words dt{
float:left;
padding: 10px;
width: 220px;
height: 30px;
background: #CCC;
text-align: center;
}
section.words dd{
float:left;
padding: 10px;
width: 220px;
height: 30px;
background: #FFF;
text-align: center;
}
section.words p.husen{
position:absolute;
display:block;
padding: 10px;
width:220px;
height: 30px;
background:#FF0;
left: 240px;
}
section.comment{
margin: 10px auto;
padding: 5px;
clear:both;
width: 470px;
height: 50px;
background: #ccf;
}
*まとめ
実現はできますが、クリックすると消えるだけで、再びタップしても元には戻れません。
display:noneにするとタグが消えてしまいますので、再びタップしても戻れる状況を作る必要もあると思います。
~
~
以上
前回記事[[付箋のようにマウスを載せたら剥がされる仕組みを作る1]]ではCSSのみで実装していましたが、今回はjQueryも使って実装していきます。11月13日記事
~
~
イメージ
~
クリックする前
&image(width=450,003.png)
クリックした後
&image(width=450,004.png)
~
~
目次
#contents
~
~
----
~
*概要
今度はjQueryのclickイベントを使って行っていきます。
~
~
*コード
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$(".husen").click(function(){
$(this).css('display','none');
});
});
</script>
<title>jQueryでタップやマウスを載せたら消える付箋</title>
</head>
<body>
<div id="wrapper">
<section class="photo">
</section>
<section class="words">
<dl>
<dt>aaaaa</dt><dd>bbbbbb</dd>
</dl>
<p class="husen">click or tap</p>
</section>
<section class="comment">
<p>コメントコメントコメントコメントコメントコメント</p>
</section>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding: 20px;
border:1px solid #000;
width:480px;
min-height: 400px;
}
section.photo{
margin:10px auto;
width:480px;
height:320px;
background: #FCC;
}
section.words{
position:relative;
}
section.words dl{
margin:10px auto;
width:480px;
background: #cfc;
}
section.words dt{
float:left;
padding: 10px;
width: 220px;
height: 30px;
background: #CCC;
text-align: center;
}
section.words dd{
float:left;
padding: 10px;
width: 220px;
height: 30px;
background: #FFF;
text-align: center;
}
section.words p.husen{
position:absolute;
display:block;
padding: 10px;
width:220px;
height: 30px;
background:#FF0;
left: 240px;
}
section.comment{
margin: 10px auto;
padding: 5px;
clear:both;
width: 470px;
height: 50px;
background: #ccf;
}
*まとめ
実現はできますが、クリックすると消えるだけで、再びタップしても元には戻れません。
display:noneにするとタグが消えてしまいますので、再びタップしても戻れる状況を作る必要もあると思います。
~
~
以上
