aリンクタグが効かない時の対処法（javascriptが怪しい）
aタグのリンクが効かない場合の対処法をご紹介しています。
他に考えられる原因が見つからない場合は、javascriptを疑ってみましょう。
共同開発時や、他人の作ったテンプレートを改変する場合はjavascriptを修正する事で解決する場合が多いです。
aリンクタグが効かない理由がわからない
今回は手短にネタを一つ。
よくaタグで囲っているリンクが押しても飛ばない事がありますよね。
このリンクが効かない時に対処する方法を1つ紹介します。
他に考えられる原因がない場合
一般的に考えられる方法を一通り試して、それでもリンクが効かない場合は以下の方法を試してみましょう。
特に他の人が作った（一緒に作った）WEBサイトの場合に、試してみる価値があると思います。
あえてリンクを制限しているケース
例えばナビゲーションメニューで、対象メニューにマウスを合わせるとプルダウンメニューを出す場合がありますよね。
この場合、数段のプルダウンメニューのいずれかを押すために親メニューが存在している訳です。
しかし場合によっては、その親メニュー自体もリンクで別ページに飛ばしたい場合がありますよね。
ナビゲーションメニュー例
<li class="dropdown"><a href="リンクURL">親メニュー</a> <ul> <li><a href="リンクURL">子メニュー1</a></li> <li><a href="リンクURL">子メニュー2</a></li> </ul> </li>
この様なケースの場合、親メニューは別に押せなくてもいい訳です。
共同開発や他作のテンプレートによくありがち
他の人が作ったファイルや海外テンプレートなどでは、この親メニューがあえてクリックできない様に制限をしている場合があるのです。
親切心と言えばそれまでですが、この事を知らない人にとっては厄介です。
javascriptを確認してみる
これはCSSでブロックしているのではなく、javascriptで制限を掛けている可能性が高いです。
そのページで読み込んでいるjsファイルを洗い出し、上記の例であれば「dropdown」のクラス名で検索を掛けてみましょう。
このdropdownで指定された部分のリンクを制限している部分が必ずあるはずです。
javascript内コード
$('.main-header .navigation li.dropdown > a,.hidden-bar .side-menu li.dropdown > a') .on('click', function(e) { e.preventDefault(); });
検索してみると実際にこのような箇所がありました。
これがdropdownのクラス名の付いたliタグのaタグが効かない理由ですね。
.navigationクラスの.dropdownクラスが付いたliタグ内にあるa、そしてその他のパターンも抱き合わせしてありますが、e.preventDefault();としてあります。
つまりここを消すかコメントアウトしてしまえば反映されなくなりますので、リンクで飛ばす事ができる様になります。
コメントアウト
// e.preventDefault();
e.preventDefaultメソッド
e.preventDefaultは、デフォルトの動作をキャンセルするメソッドです。
リンクタグ以外にも条件に応じてフォームのボタン送信を効かなくしたりするなど、様々な用途があります。
リンクタグを切るため専用のメソッドではないので注意して下さい。
他の原因の場合は以下をもう一度チェック
それ以外にリンクが効かない主な原因をご紹介しましょう。
・URLが正確に入っていない（404エラーも含む）
・リンク自体が押せない（絶対配置要素が上に重なっている）
・リンクと判断されていない（aタグ周りに全角スペースなどが入っている）
上記のような理由が一般的ではないかと思います。
URLが正確に入っていない
これはリンクが効かないというより、飛ばす先のアドレス表記に間違いがある場合に起きます。
http://できちんと表記しているかどうかをまずチェックしましょう。
単純に404エラーが出ているのであればアドレスが間違っているだけで、リンクが効いていない訳ではありません。
リンク自体が押せない（絶対配置による重なり）
これはよくありがちな現象だと思います。
aタグ周りに絶対配置された要素があり、その要素がaタグの周りに乗っかって邪魔をしている訳です。
:before要素などを絶対配置で使っている時に起こりやすいですね。
この場合、aの要素に対してposition: relative;を設定しているかどうかを確認しましょう。
対象となるaタグに対して相対配置「relative」を入れると解決する場合が多いと思います。
z-indexによる重なり
それ以外にz-indexによる重なりが影響し、aタグが他要素の下に回り込んでいるためにリンクが効かない事があります。
CSSのz-indexの部分を確認してみましょう。
まずは単純にこれを付け外しする事でリンクが復活するのであれば、z-indexの問題だと特定できます。
他要素が上に重なっている
絶対配置で上に重なるのは、リンク要素自身だけではありません。
他の要素部分、例えば隣り合っている別の要素が対象のリンク部分のとこまではみ出している可能性もあります。
リンク要素以外の要素が上に重なって邪魔をしていれば、やはりリンクは押せません。
そのような場合は、ディベロッパーツールで要素が及んでいる（侵食している）対象範囲を確認してみると良いでしょう。
aタグと認識されていない
これはレアなケースですが、たまにありますね。
<a href=""> と初めていくときにhrefの前に半角スペースを入れます。
この半角スペースが全角スペースになっていたりすると、aタグを認識されません。
