在 Opencart 上使用 foreach 的 Twitter 引导选项卡答案

【问题标题】：Twitter Bootstrap Tabs Using foreach On Opencart在 Opencart 上使用 foreach 的 Twitter 引导选项卡
【发布时间】：2013-09-24 05:42:02
【问题描述】：

我想使用 twitter bootstrap 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 的父标签（tab-general、tab-data、tab-design）可以完美地工作

第一次重新加载，语言 1 是活动标签

当点击语言 2 的标签时

链接#language2标签有selected类
div id 为 language2 的标签有显示块但没有 active 类
语言 1 li 仍有 active 类，但语言 2 li 没有 active 类。

当我尝试复制 html（通过检查元素）并在 jsfiddle 上制作（修改内容而不是 html 标签）时，它可以完美运行。 Jsfiddle

【问题讨论】：

您的 php 代码适用于 Bootstrap 3。当我单击第二个选项卡时，它的类为 active
请记住，您有ul#languages 和div#languages，它们可能会相互冲突（HTML 中的两个元素不应具有相同的 ID）。一个是.nav.nav-tabs，另一个是.tab-content
@JofryHS : 抱歉我的错误，我已经改了但还是不行
@Bora 在 jsfiddle 代码工作（通过检查元素使用 html 复制）和我的应用程序没有 foreach 但我的应用程序不能使用 foreach。
@KapanjadiMomod 我尝试了你的 php 代码并且工作了

标签： php twitter-bootstrap opencart twitter-bootstrap-3

【解决方案1】：

问题已解决

只需删除 opencart 上的默认 jquery 选项卡

<script type="text/javascript"><!--
$('#tabs a').tabs(); 
$('#languages a').tabs();
//--></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"
      }

}

另一方面，当你点击 tabs 时，页面不会刷新，而且它不是 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>

希望一切顺利，我亲爱的 opencarter ... ;)

【讨论】：

感谢您的回答，但没有更改，仍然无法正常工作。我已经解决了我的问题。