jQueryでMix it up風の絞り込みの実装(他ページからのパラメータ指定リンクで遷移時の絞り込みにも対応)

[ ID : 3363 ]
ゴールド
jQueryでMix it up風の絞り込みの実装(他ページからのパラメータ指定リンクで遷移時の絞り込みにも対応)

概要

【プラグイン不使用】上部に設置したボタンをクリックすることで、Mix it up風にコンテンツを絞り込む方法について。
他ページから指定のパラメータリンクをさせることでページロード時に絞り込みを実行した状態で表示させることも可能。

用途・要件

  • プラグインを使用せずにMix it up風にコンテンツを絞り込みさせる。
  • 他のページからの遷移時にも絞り込んだ状態での表示を実行する。
  • 他ページからのリンク遷移時に、デフォルトで絞り込んだ状態でページを表示させたい場合はリンクにパラメータ「hoge=**(**はdata-trigger-idで指定した文字列が入る)」を指定する。
  • data-trigger-idとdata-target-idを一致した文字列とする。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

その他

  • jQuery v3.6.0使用。

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録