久しぶりの投稿になりますね。
今回はシンプルなタブを作成してみました。タブの入れ子もできるようになっています。
jQuery UIのTabsを利用すればよいのですが、デザインの調整などを考えると自前のほうが楽だったりするので。
今回はCodePenを利用してみました。
See the Pen Simple Tab by hukinotou (@webspace) on CodePen.
htmlの構成としては.tabs内に.tabでタブを記述し、.panels内に.panelでコンテンツを記述します。タブに設定されたdata-target属性で指定されたコンテンツを表示します。
cssは、.panelに設定しているdisplay属性のみが必須となり、あとは必要に応じてデザインを変更できます。
CodePenの仕様でdata-target属性を利用していますが、href属性を利用するともっとシンプルにできますね。
jsのtoggleのコードがモヤモヤするのですが、なにかいい書き方ありませんかね。。。
[AD]
