金のフレーズ・銀のフレーズ。つくったもの脱jQueryカテゴリーソート機能を、javascriptとcssを使い、jQueryなしで作りました。選択されたカテゴリーのものだけがのこり、それ以外は縮小・透過表示されクリックできなくなるというものです。カテゴリーを選択するボタンとコンテンツとなる要素を、同じクラスを指定するだけで反応するように作っています。id=”btn”></dl>で設定。<dd></dd>が各ボタンです。それぞれにクラスを指定しておきます。このクラスを判別して、ソートを行います。id=”contents”></ul>が、ソートされるコンテンツです。それぞれの<li></li>にクラスを指定。このクラスと、ボタンのクラスを照らし合わせ判別します。クラスを複数指定することもできます。none;}この.notActiveクラスで、選択されたカテゴリー以外の要素を、縮小・透過させクリックできないようにするためのスタイルを設定しています。クリックされたボタンのクラスを取得。選択された色が代入される。notActiveクラスを付与contents[j].classList.add('notActive');}});}<dd></dd>のボタンがクリックされたら、クラスを取得。そのクラスが付いている要素以外に、.notActiveクラスを付与しています。投稿一覧TOEIC900越えを目指して英語勉強中。現在TOEIC655点。2020.05.31デモはこちら。スクロールしていって、画面の中に入ったらフェードインで表示。2019.03.22マウスホイールで切り替わる全画面表示のコンテンツをつくってみました。マウスホイールに反応して、次のページがフェードインしてくるようにしています。金のフレーズ・銀のフレーズ。WordPress.。