Pocket

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

html

ポイントは、大項目内aタグの「id」と、小項目内inputとbuttonの「value」を同じ値にすること。
また、全ての項目に一括でチェックを入れさせたい場合は、inputのclassをparentに設定すると「value」が同じ項目全てにチェックが入ります。

css(必要最低限の記述のみ)

js

いかがでしょうか?文言を変更すればさまざまな項目で使用することができるので、ぜひご活用ください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。