fn$.tabs:タブ
コンテンツ 1
コンテンツ 2
コンテンツ 3
  • ステッパー対応 ->
タブ ①
タブ ②
タブ ③
コンテンツ 1
コンテンツ 2
コンテンツ 3
  • タブ自動生成 -> タブ名称を指定する場合は、tav-noteに属性data-titleで指定
コンテンツ 1
コンテンツ 2
コンテンツ 3
  • fn$.tabs({mode:'step'}):ステップ式 + タブ自動生成 -> タブ名称を指定する場合は、tav-noteに属性data-titleで指定

  fn$.tabs({mode:'step'})(document.getElementById('tab4'));
//フィッターのsticlyは、cssで実現
  .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    align-self: flex-end;
  }
//親要素にoveflow = hiddenがあると効かない!
コンテンツ 1
コンテンツ 2
コンテンツ 3
コンテンツ 4
コンテンツ 5
node$().tabs():タブ
  • 複数の要素をまとめてタブ化する。
コンテンツ 1
コンテンツ 2
コンテンツ 3
//currryQで指定するとまとめてタブ化する
//要素がはなれている場合は、最初の要素エリアに移動してタブ化(ステップ化):
node$('.step').tabs();