< スポンサーリンク >

divでボタンを作りクリックするとdivのidと同じ名前のhtmlファイルを表示

私は、よくdivでリンクのボタンを作ります。

 

1ページにボタンがたくさん出来てしまうことも多く

このボタンのリンク先のファイルは〇〇.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;
 });
});

 

< スポンサーリンク >



サブコンテンツ

このページの先頭へ