| コメント |
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
// 通常リンク
$("#anchorContent1")
.attr({
"href": "https://www.google.co.jp/",
"target": "_blank"
})
.text("Google")
.css({
"font-size": "20px",
"font-weight": "bold"
})
.click(function(){
console.log("アンカーがクリックされました");
});
// ボタンがわり
$("#anchorContent2")
.attr("href", "#")
.text("ボタンのかわり")
.css({
"font-size": "20px",
"font-weight": "bold"
})
.click(function( event ){
console.log("アンカーがクリックされました");
// クリックする事によって起こる # の機能をキャンセル
event.preventDefault();
});
// jQuery UI でアンカーをボタン化
$("#anchorContent3")
.button()
.text("ボタンのかわり")
.css({
"font-size": "20px",
"font-weight": "bold",
"padding": "10px"
})
.click(function( event ){
console.log("アンカーがクリックされました");
// クリックする事によって起こるかもしれない処理をキャンセル
event.preventDefault();
});
});
</script>
</head>
<body>
<a id="anchorContent1"></a>
<br><br>
<a id="anchorContent2"></a>
<br><br>
<a id="anchorContent3"></a>
</body>
</html>
@END |
メンテナンス