2019年11月19日JavaScriptとjQueryを使って、サイト内でコンテンツをフィルタリングする方法をご紹介します。主な使いどころは、たくさんあるニュースをジャンル分けし、選んだジャンルのニュースだけを表示させるなどの場合です。他にも、商品のジャンル分けなど、種類別に並べなおす、という場面で非常に便利です。まとめまずは実例をご覧ください。こちらにALL/RED/GREEN/BLUEの4つのボタンがあります。これらを押すと、フィルターがかかり、その色の四角だけが表示されます。ALLを押すと再び全てが表示されます。実際のソースコードはこちらです。解説は後ほどさらに下の方に書いておきます。HTML対応するボタンとコンテンツに同じクラスを付与します。REDのボタンと赤のコンテンツにredというクラスを付けます。現在選択されているボタンにis_activeクラスを付けます。ページにアクセスした初期状態ではALLのボタンに付いているようにします。--></ul>JavaScript実装する動作を文章で表現するとこのようになります。}});});CSS今回の実装ではスタイルはあまり関係ありません。ボタンやコンテンツをリストではなくdivなどでも問題ありません。ポイントはis_activeクラスの使い方で、このクラスがjsによって選ばれているボタンに付与されます。そのため、それが判るようなスタイルにします。この例では、is_activeとhoverを同じスタイルにしています。#4e57cb;}まとめ頻出のスクリプトだと思いますが、丁寧に解説してみました。管理者サイトの管理者のゆすけです。美大卒業後、グラフィックデザイナーを経て、現在はWEBデザイナーをしています。Twitterでも様々な発信をしていますのでぜひフォローお願いします。最近の投稿ワードプレスでブログを始める時に注意すること。国際ニュース系メディアサイト【リンク集|12選】デスクトップPCのマウスはlogicoolのM705mがベストな理由。WEBサイトとはなにか?目的別に分類し解説します。DESIGNREMARKS。