Commentsシェアしてね♪Tweet格安で広告掲載してみませんか?TweetjQueryを使って、フィルタリング機能を実装する方法をご紹介いたします。要素をグループ分けし、各グループ毎に要素の絞り込みを行います。簡単なデモを用意したので、挙動については以下よりご確認ください。デモを見るスポンサードリンクjQueryを使って要素のフィルタリング機能を実装する方法まず、HTMLは以下のようにマークアップします。fil-3">フィルタ3のコンテンツ</li></ul>.filteringの方がクリックする要素で、data-filter属性に表示する要素のクラスを入れます。.filtering-list-contの方では表示する要素を配置し、それぞれクラスを指定してグループ分けします。jQueryのスクリプトは以下を記述します。});});</script>クリックした要素のdata-filter属性が”all”だった場合はすべての要素を表示し、それ以外はクラス名が一致する要素のみを表示しています。span”に.activeを追加しています。不要な場合は削除してもOKです。$(this).addClass('active');});あとは、CSSで見た目を整えて完了です。あとがきフィルタリング機能というと難しそうに思えますが、意外と簡単に実装できちゃいます。リアルタイムで要素の絞り込みを行いたい場合など、フィルタリング機能を実装する際はぜひ参考にしていただければと思います。コメントをキャンセルメールアドレスが公開されることはありません。