< スポンサーリンク >
divでボタンを作りクリックするとdivのidと同じ名前のhtmlファイルを表示
私は、よくdivでリンクのボタンを作ります。
１ページにボタンがたくさん出来てしまうことも多く
このボタンのリンク先のファイルは〇〇.html
このボタンのリンク先のファイルは××.html
と設定するのが面倒なので、ボタンにしているdivのidと同じ名前のhtmlファイルにして、いちいち設定しなくていいようにしています。
＜サンプル＞
＜html＞sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>divでボタンを作りクリックするとdivのidと同じ名前のhtmlファイルを表示</title>
<link rel="stylesheet" href="sample.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="sample.js"></script>
</head>
<body>
<p>divでボタンを作りクリックするとdivのidと同じ名前のhtmlファイルを表示する</p>
<div id="aaa" class="div_link">id:aaa<br /><br />clickすると<br />aaa.htmlへ</div>
<div id="bbb" class="div_link">id:bbb<br /><br />clickすると<br />bbb.htmlへ</div>
<div id="ccc" class="div_link">id:ccc<br /><br />clickすると<br />ccc.htmlへ</div>
<div id="ddd" class="div_link">id:ddd<br /><br />clickすると<br />ddd.htmlへ</div>
<div id="eee" class="div_link">id:eee<br /><br />clickすると<br />eee.htmlへ</div>
</body>
</html>
＜style＞sample.css
.div_link{
padding : 5px;
margin-left : 10px;
text-align : center;
background-color : #ffffff;
cursor : pointer;
border : solid 1px;
float : left;
}
＜JavaScirpt＞sample.js
$(function(){
$("div").click(function(){
var vURL = this.id + ".html"
location.href = vURL;
});
});
< スポンサーリンク >