0

Zurb Foundation フレームワークを使用するための Divshot プロジェクトをセットアップしました。Foundation バージョン 5.02 を使用しているようです。タブは 5.02 の有効なコンポーネントですが (セクション削除されました)、Divshot の右側のコンポーネント ライブラリには表示されません (セクションはまだ利用可能です)。

Foundation ドキュメント (垂直タブ)から基本的なタブの例をコピーできました。

<dl class="tabs vertical" data-tab>
  <dd class="active"><a href="#panel1a">Tab 1</a></dd>
  <dd><a href="#panel2a">Tab 2</a></dd>
  <dd><a href="#panel3a">Tab 3</a></dd>
  <dd><a href="#panel4a">Tab 4</a></dd>
</dl>
<div class="tabs-content vertical">
  <div class="content active" id="panel1a">
    <p>Panel 1 content goes here.</p>
  </div>
  <div class="content" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
  <div class="content" id="panel3a">
    <p>Panel 3 content goes here.</p>
  </div>
  <div class="content" id="panel4a">
    <p>Panel 4 content goes here.</p>
  </div>
</div>

このコードは、外観の観点から適切なタブを生成しますが、実際には機能しません。Divshot の左上には、各タブをクリックすると、異なる ID セレクターを持つ要素がアクティブになっていることが示されていますが、タブのコンテンツは適切に変更されません。

Foundation 5 のタブ機能は壊れていますか、それとも単に Divshot に含まれていませんか?

4

1 に答える 1