divやliなどブロックごとリンクする

harada 751views 更新:2014年4月9日

aタグだけでなく、ブロックごと全体でリンクさせたいときに便利です。

Javascript

function link(url) {
 location.href = url;
}

HTML

<div onKeyPress="return true" onClick="link('http://hacknote.jp/archives/tag/css3/')" class="inner">
<p>「css3」タグがついた記事</p>
<p><a href="http://hacknote.jp/archives/tag/css3/">すべて見る</a></p>
</div>
<div onKeyPress="return true" onClick="link('http://hacknote.jp/archives/tag/javascript/')" class="inner">
<p>「javascript」タグがついた記事</p>
<p><a href="http://hacknote.jp/archives/tag/javascript/">すべて見る</a></p>
</div>
<div onKeyPress="return true" onClick="link('http://hacknote.jp/archives/tag/wordpress/')" class="inner">
<p>「wordpress」タグがついた記事</p>
<p><a href="http://hacknote.jp/archives/tag/wordpress/">すべて見る</a></p>
</div>

CSS(オプション)

.inner {
    border: 1px solid #555;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding: 5px 15px;
}
.inner:hover a{
    text-decoration:none;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません