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>

您必须将标签的click事件与所需按钮绑定。

Yii2选项卡设置为活动后选项卡不更改状态

1 个答案: