aタグをクリックしてプルダウンメニューを出したり、タブメニューで別のコンテンツを表示させたりするケースよくありますよね。
今日のTIPSは特定のaタグやグループのaタグのリンクを無効にしてクリックしても「何もさせない」というやり方をjQueryで実現する方法です。
目次
準備
jQueryの読み込み
jQueryを使うので実行する前に読み込みます。今回はgoogleが提供しているapiから直接読み込みました。バージョンは2.0.3。
もちろんローカルに保存して読み込んでもOK。
無効にするaタグを指定
全部のaタグを無効にしてしまうと通常のリンクが動かない、という事態になってしまいます。なので今回はidがglobalMenuという名前のulタグにあるaタグを無効にするという設定にします。htmLにすると以下のようになります。
<ul>
<li style=”list-style-type: none”>
<ul>
<li><a>メニュー01</a></li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none”>
<ul>
<li><a>メニュー02</a></li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none”>
<ul>
<li><a>メニュー03</a></li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none”>
<ul>
<li><a>メニュー04</a></li>
</ul>
</li>
</ul>
jQueryを書く
準備が出来たのでjQueryを書きます。今回は「id名globalMenuの中にあるaタグをクリックしたとき元々の動きをキャンセルする」という処理です。
<script>
$(document).ready(function(){
$(‘#globalMenu a’).click(function(e){
e.preventDefault();
});
});
</script>
こんなかんじに書くとaタグのリンククリックが無効になり、押しても何も起こらなくなります。
では簡単に解説していきましょう。
解説
jQueryの始まり
scriptのあとの
$(document).ready(function(){
はjQueryを書く前に書く一文です。最後に必ず
});
で閉じます。
ターゲットの設定
次に今回の本文。
$('#globalMenu a')
これは「id名globalMenuの中にあるaタグ」という意味になります。これがターゲットになります。単に’a’にしてしまうと全部のaタグになってしまいます。
ちなみにこれをもっと特定したいとき、例えば「#globalMenuのクラス名noLinkという名前があるaタグだけにかけたい」という場合は以下のようになります。
$('#globalMenu a.noLink')
という感じですね。aはあってもなくてもOK。
「何をしたら」というアクションの指定
ターゲットが決まって、「ターゲットが何をしたら」という部分を決めます。
それが
.click(function(e){
という部分。「.click」で「クリックをしたら」という意味になります。clickによるイベントを実行するのでfunctionが続き、「e」という固有の名前があるイベントに指定します。
クリックを実行したあとの処理
最後に「何をするか」を決めます。
e.preventDefault();
preventDefault();というのは元々のイベントをキャンセルします。なので、aタグのイベントつまりリンク先に遷移するイベントをキャンセルします。それに先ほどつけた名前の「e」というのを指定しています。
全部つなげる
もう一度全部つなげた処理です。
<script>
$(document).ready(function(){
$(‘#globalMenu a’).click(function(e){
e.preventDefault();
});
});
</script>
まとめ
他にもaタグのイベントをキャンセルするやり方はありますが、jQueryを使ってhtmlをいじらずキャンセルできるこのやり方は簡単なので覚えておくとラクでしょう。
