Bootstrap:活动选项卡应显示在页面加载上

时间:2016-03-18 06:44:10

标签: javascript jquery twitter-bootstrap tabs

您好我正在使用bootstrap创建标签。我知道这个问题在很多时候之前都有问题,但我的标签代码有点不同我使用按钮进入下一个标签这里是我的jquery代码

 $(document).ready(function () {


      $(".btn_1").click(function (e) {
        e.preventDefault();
        var $active = $('.wizard .nav-wizard li.active');
        $active.next().removeClass('disabled');
        nextTab($active);

    });
     //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });


});


function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
}

标签代码

<ul class="nav nav-wizard">

                    <li class="active">
                        <a href="#step1" data-toggle="tab">Location Information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step2" data-toggle="tab">Contact Information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step3" data-toggle="tab">Other information</a>
                    </li>

                    <li class="disabled">
                        <a href="#step4" data-toggle="tab">Business Keywords</a>
                    </li>
                    <li class="disabled">
                        <a href="#step5" data-toggle="tab">Upload Pictures</a>
                    </li>
                    <li class="disabled">
                        <a href="#step6" data-toggle="tab">Upload Videos</a>
                    </li>
                </ul>

我没有发布其余的因为它太大了现在一切都工作正常它会转到下一个标签但我想要的是在页面加载它显示活动标签不是第一个我也检查{{ 3}}问题,但他再次使用点击标签转到下一步,我正在使用按钮。

以下是我的代码的this

1 个答案:

答案 0 :(得分:0)

首先你的问题不明确。尝试使其与Twitter Bootstrap同步。话虽如此,在Bootstrap中不建议您尝试做什么;它提供了可在网站上使用的这些组件。不要尝试在Bootstrap中自定义基本组件。

您可以使用Bootstrap中的component来解决您的问题。