Bootstrap 3向导?

时间:2014-11-22 12:50:45

标签: jquery css twitter-bootstrap

我已经在这里问了这个问题 Creating next and back button on tabs bootstrap 3 wizard?

但是我现在已经扩展它以在最后一个标签上添加完成,但现在我有问题要删除第一个标签上的后退按钮,这是我的代码

  $('.step-back, .step-next').on('shown.bs.tab', function (e) {
            currentStep()
        })

        var previousButton = '<a href="#" data-toggle="tab" class="step-back">back</a>';
        var nextButton = '<a href="#" data-toggle="tab" class="step-next">next </a>';

        $(".wizard-navigation").html(previousButton + nextButton);

        function currentStep() {    
            var stepsLong = $('.tab-pane').length;
            var currentVal = $('.tab-pane.active').attr("data-step");
            currentVal = parseInt(currentVal);

            var prev = currentVal - 1;
            var next = currentVal + 1;

            if ( currentVal == stepsLong) {
                $(".step-next").html("finish").attr('href', '#step' + next);
            }
            else {
                $(".step-next").html("next").attr('href', '#step' + next);
            }

            if (currentVal == 0) {
                $('.step-back').addClass('hidden');
            }
            else {
                $(".step-next").removeClass('hidden');
            }


        }

这是工作小提琴 http://jsfiddle.net/52VtD/9206/

如果用户在第一个标签上删除后退按钮

,我需要什么

这是另一个工作小提琴 http://jsfiddle.net/52VtD/9207/

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/52VtD/9209/

我在你的步进器中添加了这个逻辑:

 if(currentVal == 1) $('.step-back').hide()
            else $('.step-back').show()

此问题也解决了您的点击问题:http://jsfiddle.net/52VtD/9211/

你的问题是你绑定了.shown,但是从未抛出show事件,我在你的init代码中添加了一个标签(&#34;显示&#34;)。