Yii2 Tabs小部件設置為活動后不會更改狀態

Question

我在兩個選項卡上做了兩個用於切換視圖的按鈕。 每個按鈕都對應於不同的選項卡，並且Tabs::widget下的內容已正確更新，但突出顯示的選項卡沒有發生變化，與按下該選項卡時不同。 我還想念什么？

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

Answer 1

當您單擊1或2按鈕時，它們不會觸發選項卡的click事件。 將您的腳本代碼更改為以下代碼。

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

您必須將選項卡的click事件與必需的按鈕綁定在一起。