11

Twitterブートストラップ3.0でopencart（管理者ビュー）のタブを変更したいのですが、コードは次のとおりです。

catalog_form.tpl

 <ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#tab-general" data-toggle="tab"><?php echo $tab_general; ?></a></li>
   <li class=""><a href="#tab-data" data-toggle="tab"><?php echo $tab_data; ?></a></li>
   <li class=""><a href="#tab-design" data-toggle="tab"><?php echo $tab_design; ?></a></li>
</ul>

<div id="myTabContent" class="tab-content">
  <div id="tab-general" class="tab-pane fade active in"> 

  <ul id="languages" class="nav nav-tabs">
    <?php $i = 0; ?>
      <?php foreach ($languages as $language) { ?>
         <li class="<?php if ($i == 0) { echo 'active'; } ?>"> 
            <a href="#language<?php echo $language['language_id']; ?>" data-toggle="tab"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
        </li>
      <?php $i++; } ?>
  </ul>
  <div id="Mylanguages" class="tab-content">
    <?php $a = 0; ?>
    <?php foreach ($languages as $language) { ?>
      <div id="language<?php echo $language['language_id']; ?>" class="tab-pane fade <?php if ($a == 0) { echo 'active'; } ?> in">
      <?php echo $language['language_content']; ?>
      </div>
    <?php $a++; } ?> 
  </div>

  </div>
  <div id="tab-data" class="tab-pane fade">
   ...
  </div>
  <div id="tab-design" class="tab-pane fade">
   ...
  </div>
</div>

foreach なしの親タブ (タブ一般、タブデータ、タブデザイン) は完全に機能します

最初のリロード、言語 1がアクティブなタブ

ここに画像の説明を入力

言語2のタブをクリックすると

  • リンク#language2タグはselectedクラスを持っています
  • divIDlanguage2を持つタグには表示ブロックがありますが、activeクラスはありません
  • 言語 1liにはまだactiveクラスがありますが、言語 2にはクラスがli ありませんactive。

ここに画像の説明を入力

html を (inspect 要素を介して) コピーして jsfiddle で作成 (html タグではなくコンテンツを変更) しようとすると、完全に機能します。ジャスフィドル

4

2 に答える 2