0

ページで再利用できるタブを作成しようとしています。コンテンツ ID の名前が tabContent1 である場所に対応する tab1 という名前の ID の例を見てきましたが、コンテンツは動的に読み込まれるため、ページに表示されるタブの数を制御できません。ページ全体で再利用される html を設定する方法の構造はありますが、js を構築する方法がわかりません。最終的に、すべてのコンテンツ タブはページの読み込み時に閉じられ、タブがクリックされると、対応するコンテンツが下にスライドします。

<div class="tabContainer">
    <div class="tabMenu">
        <div class="tab">Tab 1</div>
        <div class="tab">Tab 2</div>
        <div class="tab">Tab 3</div>
    </div><!-- class="tabMenu" -->
    <div class="tabContent">
        <div class="tabBlock">Tab Content 1</div>
        <div class="tabBlock">Tab Content 2</div>
        <div class="tabBlock">Tab Content 3</div>
    </div><!-- class="tabContent" -->
</div><!-- class="tabContainer" -->

html 構造を再構築する必要がある場合は問題ありません。

これについての助けは大歓迎です。

4

0 に答える 0