【jQuery】リンク元により表示するタブを指定する方法

urlの最後に付けられるハッシュタグ(#なんちゃら)を使ってどうこうするやつ。
知ってしまえば仕組み自体結構簡単というか、なかなかどうして応用が効く。

はじめに

タブの作り方は色々あるだろうしプラグインも転がってるだろうけど、
何がかち合うか分からんかったので全部自作した。

リンク元

見たまま、遷移先urlにハッシュタグをつけとく。

リンク先(tab.html)

これ押したらこれが表示するよっていうのをそれぞれ作る。
jQueryに関しては上記ので動いてるけど他でどうかはわかんない。
ハッシュタグについての注意として、同一のidは振らないように。
idと関連付けするとページ内リンクが発動するからこの場合あまり幸せにならない。
それがいいならいいんだけど。
クリックした(=アクティブな)メニューは「class=”active”」を付与するんだけどjsでやるから書かなくていい。

「tab_btn」のアクティブなやつに「active」ってclassを振るのでそこだけ注意。
それ以外は自分の好きなようにclass振ったり何なりでデザイン。
表示非表示の部分は全部jsで制御するので書かなくていい。

とりあえずタブのメニューを押したときの動作はこう。

なんていうかhtmlの作り的にはaを指定すりゃいいんだろうけど、これで動いてるし文字数減っていいかなって。

で、今回一番肝になるページ遷移時の動作はこう

普通何もしてない状態なら一番最初のやつ見せるから、そのように指定してる。
今気づいたけどタブ数超えたハッシュタグついたときの処理してないや。
まあそこはコーダーのミスか物好きがurlいじった時でもなきゃ気にするところではないけれど。

まとめ

一部ガチャガチャしてる気がするけど動くからいいやで終了。
#が何だったらどうするって処理は全部js上でやるので、そのルールに則るんなら何書いてもいいっていうね。
こういうののやつだったら数字に落とし込めるようにした方がいいけど。

応用すればフォームのselectの指定とかできるよなとか、配列的な感じにすれば複数のトリガーにできるよなとか。
とっくのとうに誰かやってるだろうけど、思った。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です