Yii2 Tabs 小部件在设置为活动后不更改状态

Question

我制作了两个用于在 2 个选项卡上切换视图的按钮。每个按钮对应于不同的选项卡，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 按钮时，它们不会触发选项卡的单击事件。将您的脚本代码更改为以下一个。

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

需要绑定标签点击事件的按钮。

Yii2 Tabs 小部件在设置为活动后不更改状态

Yii2 Tabs widget not changing state after setting to active

javascript

jquery

tabs

yii2