Databases
StackOverflow2013
Postsdbo
POTwitter Bootstrap Tabs Using foreach On Opencart
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter Bootstrap Tabs Using foreach On Opencart
    text
    copied!<p>I want change tabs on opencart (admin view) with twitter bootstrap 3.0, the code following :</p> <p><a href="https://github.com/classmild/testshop/blob/master/admin/view/template/catalog/category_form.tpl#L17" rel="noreferrer">catalog_form.tpl</a></p> <pre><code> &lt;ul id="myTab" class="nav nav-tabs"&gt; &lt;li class="active"&gt;&lt;a href="#tab-general" data-toggle="tab"&gt;&lt;?php echo $tab_general; ?&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a href="#tab-data" data-toggle="tab"&gt;&lt;?php echo $tab_data; ?&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a href="#tab-design" data-toggle="tab"&gt;&lt;?php echo $tab_design; ?&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="myTabContent" class="tab-content"&gt; &lt;div id="tab-general" class="tab-pane fade active in"&gt; &lt;ul id="languages" class="nav nav-tabs"&gt; &lt;?php $i = 0; ?&gt; &lt;?php foreach ($languages as $language) { ?&gt; &lt;li class="&lt;?php if ($i == 0) { echo 'active'; } ?&gt;"&gt; &lt;a href="#language&lt;?php echo $language['language_id']; ?&gt;" data-toggle="tab"&gt;&lt;img src="view/image/flags/&lt;?php echo $language['image']; ?&gt;" title="&lt;?php echo $language['name']; ?&gt;" /&gt; &lt;?php echo $language['name']; ?&gt;&lt;/a&gt; &lt;/li&gt; &lt;?php $i++; } ?&gt; &lt;/ul&gt; &lt;div id="Mylanguages" class="tab-content"&gt; &lt;?php $a = 0; ?&gt; &lt;?php foreach ($languages as $language) { ?&gt; &lt;div id="language&lt;?php echo $language['language_id']; ?&gt;" class="tab-pane fade &lt;?php if ($a == 0) { echo 'active'; } ?&gt; in"&gt; &lt;?php echo $language['language_content']; ?&gt; &lt;/div&gt; &lt;?php $a++; } ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tab-data" class="tab-pane fade"&gt; ... &lt;/div&gt; &lt;div id="tab-design" class="tab-pane fade"&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Parent tabs (tab-general, tab-data, tab-design) without foreach work perfectly</p> <p><strong>First reload, language 1</strong> is active tab</p> <p><img src="https://i.stack.imgur.com/GxY0B.png" alt="enter image description here"></p> <p><strong>When click language 2's tab</strong></p> <ul> <li>link <code>#language2</code> tag have <code>selected</code> class</li> <li><code>div</code> tag with id <code>language2</code> have display block but not have <code>active</code> class </li> <li>language 1 <code>li</code> still have <code>active</code> class but language 2 <code>li</code> have not <code>active</code> class.</li> </ul> <p><img src="https://i.stack.imgur.com/zsrJg.png" alt="enter image description here"></p> <p>When I try copy html (via inspect element) and make on jsfiddle (modify content not html tag) it's works perfectly. <a href="http://jsfiddle.net/drjWD/1/" rel="noreferrer">Jsfiddle</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload