div要素もまとめてリンクにするjavascript「Link Boxes」

aタグを付与すると色が変わりアンダーラインが表示され、リンクさます。
しかし、もっと大きなdivなど全体をリンクにしたい時もあるでしょう。
Link Boxesではjavascriptでの解決策を示しています。
LinkBox

使用方法
Link Boxesで使用しているjavascriptをちょっと変更したLinkBox.jsをダウンロードしてください。
*li要素をdiv要素に変更しただけです。
<script src="http://yourdomain/LinkBox.js" type="text/javascript"></script>
<style type="text/css">
.linkbox {border:1px solid #888;background:#f9f9f9;padding:10px;width:500px;margin-bottom:1em;}
.hovering {background:#ccc;border-color: #ccc;cursor:pointer;} //マウスオーバー時のCSS
</style>

上記を記述したら、リンクにしたいdiv要素にclassとしてlinkboxを付与してください。
またリンク先は以下のように書きます。
*javascriptがoffの時にもリンク先は表示されます。
<div class="linkbox">
 コンテンツ
 <p class="fullstory"><a href="リンク先URI">続き</a></p>
</div>

div要素もまとめてリンクにするjavascript「Link Boxes」サンプル

sponsors

「div要素もまとめてリンクにするjavascript「Link Boxes」」をシェアする

記事作成:
記事URL:

TOP > > > div要素もまとめてリンクにするjavascript「Link Boxes」