Twitter Bootstrap Tabs Sử dụng foreach On Opencart

Question

Tôi muốn thay đổi các tab trên OpenCart (admin xem) với twitter bootstrap 3.0, đoạn mã sau:

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> 

tab Chánh (tab chung, Tab- dữ liệu, tab-thiết kế) mà không làm việc một cách hoàn hảo foreach

tải lại Đầu tiên, ngôn ngữ 1 được kích hoạt tab

Khi nhấp chuột ngôn ngữ tab 2 của

• liên kết #language2 thẻ có selected lớp
• div tag với id language2 có khối hiển thị nhưng không có active lớp
• ngôn ngữ 1 li vẫn có active lớp học nhưng ngôn ngữ 2 li không có active lớp học.

Khi tôi cố gắng sao chép html (thông qua kiểm tra nguyên tố) và thực hiện trên jsfiddle (sửa đổi nội dung không html tag) nó hoạt động hoàn hảo. Jsfiddle

Answer 1

vấn đề giải quyết

Chỉ cần loại bỏ jque mặc định tab ry trên OpenCart

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

Kịch bản này bạn sẽ thấy trên mẫu tập tin sử dụng ngôn ngữ tab admin/view/template/xxx/xxxx_form.tpl

Answer 2

Bạn thân mến tôi hy vọng bạn không nhận được khó chịu với đề cập một số vấn đề cơ bản trong php, câu trả lời này có thể xem bởi những người khác, tôi đã thấy bạn câu trả lời khác và tôi biết bạn đang đam mê;) ...

$ ngôn ngữ là một mảng, và bộ điều khiển có thể gửi nó vào trang web của bạn với cùng trật tự và thứ tự sẽ không thay đổi var_dump($languages); của mảng là một cái gì đó như thế này:

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

} 

Mặt khác, khi bạn bấm vào các tab, trang sẽ không làm mới và bằng cách nào đó nó không phải là AJAX, vì vậy chúng ta không nên thay đổi g mã php của chúng tôi.

tôi nghĩ rằng bạn đã thay đổi một chút trong mã php của bạn, có lẽ mã này tôi đã viết ở đây làm việc cho bạn ...

<?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> 

hy vọng bests, opencarter thân yêu của tôi .. ;.)