最后一个标签下一个按钮将其重定向到首页

时间:2019-12-08 04:29:10

标签: javascript jquery

我可以使用以下代码在标签之间添加上一个和下一个链接。现在,当用户进入我的上一个标签页(第4个)时,我希望他们在单击下一步时可以重定向到/home。谢谢!

    $('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn btn-default" href="#">Prev</a><a class="tablink-next btn btn-default" href="#">Next</a></div>');
    $('.tablink-prev').click(function(){
        var index = $('.quicktabs-tabs li.active').index();
        $('.quicktabs-tabs li').eq(index).removeClass('active');
        if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
        return false;
    });
    $('.tablink-next').click(function(){
        var length = $('.quicktabs-tabs').first().children().size();;
        var index = $('.quicktabs-tabs li.active').index();
        $('.quicktabs-tabs li').eq(index).removeClass('active');
            if (parseInt(index) == parseInt(length) - 1 ) {
                index = index - 1;
            }
        $('.quicktabs-tabs li').eq(index + 1).addClass('active');
        $('.quicktabs-tabs li').eq(index + 1).find('a').click();
        return false;
    });

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>test</title>
    </head>
    <body>

        <ul class="quicktabs-tabs">
          <li class="active">tab1</li>
          <li>tab2</li>
          <li>tab3</li>
          <li>tab4</li>
        </ul>
        <button class="tablink-prev">Prev</button>
        <button class="tablink-next">Next</button>
        <script>
            $('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn btn-default" href="#">Prev</a><a class="tablink-next btn btn-default" href="#">Next</a></div>');
            $('.tablink-prev').click(function(){
                var index = $('.quicktabs-tabs li.active').index();
                $('.quicktabs-tabs li').eq(index).removeClass('active');
                if (index == 0) {
                index = 1;
            }
            $('.quicktabs-tabs li').eq(index - 1).addClass('active');
            $('.quicktabs-tabs li').eq(index - 1).find('a').click();
                return false;
            });
            $(".tablink-next").click(function(){
                var length = $('.quicktabs-tabs').first().children().length;
                var index = $('.quicktabs-tabs li.active').index();
                $('.quicktabs-tabs li').eq(index).removeClass('active');
                if (parseInt(index) == parseInt(length) - 1 ) {

                    window.location.href = '/home'; //redirect to home
                    //index = index - 1;
                }
                $('.quicktabs-tabs li').eq(index + 1).addClass('active');
                $('.quicktabs-tabs li').eq(index + 1).find('a').click();
                return false;
            })

        </script>

    </body>
</html>

当最后一个选项卡具有活动类时,如果条件和(parseInt(index)== parseInt(length)-1)条件变为真并重定向到本地路由,则按next控件进入