Щебетать в бутстрапе с помощью foreach On Opencart

Я хочу изменить вкладки в opencart (admin view) с помощью twitter bootstrap 3.0, следующий код:

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 - активная вкладка

enter image description here

При щелчке по языку 2 вкладка

  • Ссылка #language2 имеет selected класс Тег
  • div с идентификатором language2 имеет блок отображения, но не имеет active class
  • Язык 1 li все еще имеет класс active, но язык 2 li не имеет класса active.

enter image description here

Когда я пытаюсь скопировать html (через элемент проверки) и сделать на jsfiddle (изменить контент, а не тег html), он отлично работает. Jsfiddle

Ответы

Ответ 1

Проблема решена

Просто удалите вкладки jquery по умолчанию на opencart

<script type="text/javascript"><!--
$('#tabs a').tabs(); 
$('#languages a').tabs();
//--></script>

Этот script вы увидите в файле шаблона с помощью языковых вкладок admin/view/template/xxx/xxxx_form.tpl

Ответ 2

Дорогой друг, я надеюсь, вы не расстроены упоминанием некоторых основ в php, этот ответ может быть рассмотрен другими, я видел вас другие ответы, и я знаю, что вы geek;)...

$languages ​​- это массив, и контроллеры могут отправлять его на вашу веб-страницу с тем же порядком и порядок не изменит значение var_dump($languages); массива примерно так:

    array(2) {
      ["en"]=&gt;
      array(9) {
        ["language_id"]=&gt;
        string(1) "3"
        ["name"]=&gt;
        string(7) "English"
        ["code"]=&gt;
        string(2) "en"
        ["locale"]=&gt;
        string(31) "en_US.UTF-8,en_US,en-gb,english"
        ["image"]=&gt;
        string(6) "en.png"
        ["directory"]=&gt;
        string(7) "english"
        ["filename"]=&gt;
        string(7) "english"
        ["sort_order"]=&gt;
        string(1) "0"
        ["status"]=&gt;
        string(1) "1"
      }
      ["fr"]=&gt;
      array(9) {
        ["language_id"]=&gt;
        string(1) "2"
        ["name"]=&gt;
        string(10) "..."
        ["code"]=&gt;
        string(2) "..."
        ["locale"]=&gt;
        string(31) "..."
        ["image"]=&gt;
        string(6) "..."
        ["directory"]=&gt;
        string(7) "...."
        ["filename"]=&gt;
        string(7) "..."
        ["sort_order"]=&gt;
        string(1) "1"
        ["status"]=&gt;
        string(1) "1"
      }

}

с другой стороны, когда вы нажимаете на вкладки, страница не обновляется и как-то не AJAX, поэтому мы не должны менять наш php-код.

Я думаю, вы немного изменились в своем php-коде, возможно, этот код, который я написал здесь, работает для вас...

<?php foreach ($languages as $language) { ?>
    <li><a href="#language<?php echo $language['language_id']; ?>" data-toggle="tab"><i class="lang-<?php echo str_replace('.png','', $language['image']); ?>" title="<?php echo $language['name']; ?>"></i> <?php echo $language['name']; ?></a></li>
<?php } ?>
</ul>

Надеюсь, ребята, мой дорогой обозреватель... ;)