コーディング /

大分類・小分類の検索項目をタブで切り替えるUIの作り方

ECサイトなら商品カテゴリ、求人サイトなら職種など、膨大な検索項目をまとめる方法のひとつとして、タブで切り替えるUIが挙げられます。今回は、そんなUIの作り方をご紹介します。 デモはこちら。例として、汎用性の高い都道府県を項目にしています。必要なコードは以下です。

html ポイントは、大項目内aタグの「id」と、小項目内inputとbuttonの「value」を同じ値にすること。 また、全ての項目に一括でチェックを入れさせたい場合は、inputのclassをparentに設定すると「value」が同じ項目全てにチェックが入ります。 css(必要最低限の記述のみ) js いかがでしょうか?文言を変更すればさまざまな項目で使用することができるので、ぜひご活用ください!

この記事を書いた人

永渕百合子

PAGE TOP