如何在 zf2 的 bootstrap3 中保持在同一个选项卡上？

Question

我在 php 中使用了 bootstrap 3 选项卡，但是当我刷新以前的选项卡表单字段显示为空时，我如何在刷新页面后显示这些字段？

这是我的代码：

            var hash = window.location.hash;
            $('#signup_tabs_group a[href="' + hash + '"]').tab('show');    
       // Get form data and enforce tab wise validation
        var form_data = $.parseJSON($('form').attr('data-elements'));
        $("#continue_to_account").click(function (e) {
            if ($("#password1").val() != '' && $("#password1").val() != $("#password2").val()) {
                popoverContent('password2', "Please Confirm Password.", "right");
                $("#password2").popover('show');
                $("#password2").addClass('mypopover');
                $("#password2").focus();
                return false;
            } else {
                $("#password2.mypopover").popover('hide');
            }
            if ($("#email").val() != '' && $("#email").val() != $("#email2").val()) {
                popoverContent ('email2', "Please Confirm Email.", "right");
                $("#email2").popover('show');
                $("#email2").focus();
                $("#email2").addClass('mypopover');
                return false;
            } else {
                $("#email2.mypopover").popover('hide');
            }
            $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
                var id = $(e.target).attr("href").substr(1);
                window.location.hash = id;
            });
            var custom_form = [];
            var required_elements = ['email', 'email2', 'username', 'password1', 'password2'];
            for (var c = 0; c < form_data.length; c++) {
                if (typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
                    custom_form[c] = form_data[c];
                }
            }
            if (validations(custom_form, $('form'), $(this), 'right') != false) {
                e.preventDefault();
                $('#signup_tabs_group a[href="#contact"]').tab('show');
                return true;
            }
            return false;
        });
        $("#back_to_account").click(function (e) {
            e.preventDefault();
            $('#signup_tabs_group a[href="#account"]').tab('show');
        });
        $("#continue_to_website").click(function (e) {
            var custom_form = [];
            var required_elements = [{'contact_first_name': true}, {'contact_last_name': true}, {'country': true}, {'account_type': true}, {'address1': true}, {'address2': false}, {'address3': false}, {'city': true}, {'state': false}, {'zipcode': true}, {'phone_code': false}, {'phone_number': true}, {'fax': false}, {'currency': false}];
            if (
                typeof($('input[name=account_type]:checked').val()) != 'undefined' &&
                $('input[name=account_type]:checked').val() == 'company'
            ) {
                required_elements.push({'company_name': true});
            }
            //return false;
            for (var c = 0; c < form_data.length; c++) {
                if (
                    typeof(form_data[c].name) != "undefined" && 
                    typeof(form_data[c].validation) != "undefined" && 
                    typeof(form_data[c].validation.required) != "undefined"
                ) {
                    for (var i = 0; i < required_elements.length; i++) {
                        if (typeof(required_elements[i][form_data[c].name]) != 'undefined') {
                            form_data[c].validation.required = required_elements[i][form_data[c].name];
                            custom_form[c] = form_data[c];
                            break;
                        }
                    }
                }
            }
            if (validations(custom_form, $('form'), $(this), 'right') != false) {
                e.preventDefault();
                $('#signup_tabs_group a[href="#website"]').tab('show');
                return true;
            }
            return false;
        });
        $("#back_to_website").click(function (e) {
            e.preventDefault();
            $('#signup_tabs_group a[href="#contact"]').tab('show');
        });
        $('input[name=account_type]').change(function() {
            if ($('input[name=account_type]:checked').val() == 'company') {
                $('.company-label').removeClass('hidden');
            } else {
                $('.company-label').addClass('hidden');
                $('#company_name').val('');
                if ($('#company_name').hasClass('mypopover')) {
                    $('#company_name').popover('hide');
                    $('#company_name').popover('disable');
                }
            }
        });
        // jQuery International Telephone Input With Flags and Dial Codes
        $("#phone_code").intlTelInput({
            defaultCountry: "gb"
        });

        //Validation
        $(".validate_button").click(function(e){
            var words = $('#description').val().split(/\b[\s,\.-:;]*/);
            if (words.length > 100) {
                words.splice(100);
                $('#description').val(words.join(" "));
            }
            var custom_form3 = [];
            var required_elements = ['website_name', 'website_url', 'unique_visitors', 'audience_geo', 'audience_interests', 'website_content', 'advertising_type', 'other_affiliate_member', 'working_with_qs', 'description', 'hear_about_us', 'accept_terms'];
            for (var c = 0; c < form_data.length; c++) {
                if (typeof(form_data[c]) != "undefined" && typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
                    custom_form3[c] = form_data[c];
                }
            }
            if (validations(custom_form3, $('form'), $(this), 'right') != false) {
                return true;
            }

刷新页面后如何显示表单域？

Answer 1

这是一个纯粹的 JS/jQuery 问题，而不是 ZF2 相关的问题。

我是这样解决这个问题的：

$(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
    }
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    });
});

我正在寻找 'a' 元素 href 以来自 url 的哈希结尾的选项卡，然后我显示它们。当有人单击选项卡时，我还在窗口 url 哈希组件中进行了设置，因此在有人刷新页面之后，它会为他带来最后一次查看的选项卡。