2016-01-05 5 views
0

Я сделал две кнопки для переключения просмотров на 2 вкладки. Каждая кнопка соответствует разным вкладкам, а содержимое под Tabs::widget должным образом обновляется, но выделенная вкладка не изменяется в отличие от нажатия вкладки. Что еще мне не хватает?Yii2 Виджет вкладки не изменяется после установки на активный

<?php 
use yii\helpers\Html; 
use yii\bootstrap\Tabs; 
?> 

<?= 
    Html::button("1", [ 
     'class' => 'btn btn-info', 
     'id' => 'criticalTab', 
     'style' => 'position:relative; left:20px; background-color:red;', 
     ]) 
?> 

<?= 
    Html::button("2", [ 
     'class' => 'btn btn-info', 
     'id' => 'warningTab', 
     'style' => 'position:relative; left:30px; background-color:orange;', 
     ]) 
?> 

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 

    jQuery(document).ready(function() { 
     $("#criticalTab").click(function(){ 
      $("#tab1").addClass('active'); 
      $("#tab2").removeClass('active'); 
     }); 
     $("#warningTab").click(function(){ 
      $("#tab1").removeClass('active'); 
      $("#tab2").addClass('active'); 
     }); 
    }); 
</script> 

<div style="position:relative; left:0px; top:30px"> 
     <?= 
      Tabs::widget([ 
       'items' => [ 
        [ 
         'label' => 'Critical', 
         'options' => ['id' => 'tab1'], 
         'content' => 'hello' 
        ], 
        [ 
         'label' => 'Warning', 
         'options' => ['id' => 'tab2'], 
         'content' => 'hi' 
        ], 
       ], 
      ]); 
     ?> 
</div> 
+0

Это работает для меня, никаких ошибок. Класс успешно изменяется для обеих вкладок. –

+0

Да, это работает, но выделенные вкладки не меняются. Я ошибаюсь? – Gibs

+0

вкладки также выделяются при изменении. –

ответ

1

Когда вы нажимаете кнопку 1 или 2, они не запускают событие щелчка вкладок. Измените код скрипта ниже.

<script type="text/javascript"> 

jQuery(document).ready(function() { 
    $("#criticalTab").click(function(){ 

     $('.nav-tabs').find('a[href="#tab1"]').trigger('click'); 

    }); 
    $("#warningTab").click(function(){ 
     $('.nav-tabs').find('a[href="#tab2"]').trigger('click'); 

    }); 

}); 
</script> 

Необходимо связать событие щелчка вкладок с помощью необходимых кнопок.

+0

Если это решает вашу проблему, то отмечайте их как истину. –

+0

вы можете объяснить часть '.nav-tabs', пожалуйста? Спасибо – Gibs

+0

Вы используете виджет вкладки начальной загрузки, который создает вкладку в формате ul li. Если вы увидите сгенерированный html вкладок, вы увидите, что есть класс .nav-tabs. и мы привязываем событие click к этому li. –

Смежные вопросы