in hiding.

divで挟んだブロックの中にテキストリンクを置いた時に、ブロックごとリンクして欲しいと思うことがよくあります。ブロックに背景やボーダーを設定したりするとますますボタンのように振舞って欲しくなるときありますよね。

ｊQuery単体で実現可能なのでオススメです。

そのままだとブロックにリンク設定されるだけなので、hoverアクションでスタイルを差し替えることでマウスオーバーの状態も可能です。

仕組みは"BlockLink"というクラスを設定したブロックの中のaタグを探し、そこへリンクするだけです。

また、target=_blankの場合には新規ウインドウを開いて表示するようになっています。

javascript

<script type="text/javascript">
function BlockLink(){
$(".BlockLink").click(function(){var LinkTarget = $(this).find("a").attr("target");
  if(LinkTarget =="_blank"){window.open().location=$(this).find("a").attr("href");return false;}
   else if(LinkTarget !="_blank"){window.location=$(this).find("a").attr("href");return false;}
  });

$(".BlockLink").hover(
function(){$(this).removeClass("test2off").addClass("test2on");return false;},
function(){$(this).removeClass("test2on").addClass("test2off");return false;}
  );
}
$(BlockLink);
</script>

スタイルシート

<style type="text/css">
<!--
.test1{ background-color: #ccc; border:1px solid #999;padding:10px;}
.test2off{ background-color: #ccc; border:1px solid #999;padding:10px;cursor:pointer;}
.test2on{ background-color: #333; border:1px solid #999;padding:10px;cursor:pointer;｝
-->
</style>

BODYタグ内

<p>グレーの部分はリンクしていません。</p>
<div class="test1"><a href="hoge">リンク</a></div>
<p>グレーの部分もリンクしています。</p>
<div class="test2off BlockLink"><a href="hoge"　target="_blank">リンク</a></div>

サンプル

グレーの部分はリンクしていません。

グレーの部分もリンクしています。