jQuery Advent Calendar 2013、10日目です。

エントリータイトルそのままです。
結構な頻度で西畑が使ってて、へーそっかーと思ったネタです。

以下にサンプルをを置いておきました。
クリックしたらクリックされたことにするやつのサンプル

オレンジ、バナナ、メロンのリンクをクリックすると、モーダルウィンドウが開いて、さらに今クリックしたものにしたがって初期に開いているタブがかわるようになっています。
西畑が使ってるのを見るまではこういうのどうやって作るのかよく分からず、モーダルのところにタブ切り替えの処理をさらに書いて、結果的にタブ切り替えの処理が複数箇所に書いてあるような感じで実現しておりました。

クリックしたらクリックされたことにするやつの肝は、$('.modal-btn').on('click', null, function(){ 内にある以下のコード部分ですね。

$('.tab-nav-'+$(this).attr('title')).click();

例えばバナナのリンクをクリックした場合、こいつの title属性値は「banana」になっておりますので、「.tab-nav-banana」がクリックされたことになります。
で、タブの方を見てみるとバナナタブに「class=”tab-nav-banana”」が指定されておりますので、見事こいつがクリックされたことになっているということになり、$('#tab-nav a').on('click', null, function(){ 以下で指定されているタブ切りかえの処理が走ることになります。

今回の例では title属性を利用しておりますが、HTML5のカスタムデータ属性を利用すれば好きな値を自由に入れられますので使い勝手が格段によくなりますね。

というわけで、今回のケースに限らずいろんなところで使うことのできるネタですので、ご存知なかった方は是非この機会に覚えておきましょう。

jQuery Advent Calendar 2013、11目はs3pwさんです。