Skip to content

Instantly share code, notes, and snippets.

@torazuka

torazuka/toggle-class.html

Created November 27, 2010 14:39
Show Gist options
  • Save torazuka/717935 to your computer and use it in GitHub Desktop.
Save torazuka/717935 to your computer and use it in GitHub Desktop.
Download ZIP
CSSのclassを追加/削除する
Raw
toggle-class.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSのclassを追加/削除する</title>
<style type="text/css">
p#message {color: #ffffff;}
.show-message {background-color: #ff0000; width: 14em;}
.caution {border: 1px solid #ff0000;}
</style>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#message").toggleClass("show-message");
$("a[href*='2ch\.net']")
.toggleClass("caution")
.attr("target", "_blank");
$("a[href*='twitter']")
.toggleClass("caution")
.attr("target", "_blank");
});
});
</script>
</head>
<body>
<h1>CSSのclassを追加/削除する</h1>
<h2>リンク先のチェック</h2>
<button type="button">チェック</button>
<p id="message">そんな勤務態度で大丈夫か？</p>
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://toki.2ch.net/engei/">園芸板</a></li>
<li><a href="http://www.atmarkit.co.jp/">&#64;IT</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://www.jaxa.jp/">JAXA</a></li>
</ul>
<h2>メモ</h2>
<p>ボタンを押すと、特定の文字列を含むリンクに警告を表示する。もう一度押すと、表示を消す。</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment