Question

这是代码

        <div id="divFirst">
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-h-square "></i></span>
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Name" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"> <i class="fa fa-map-marker "></i></span>
                        @Html.TextBoxFor(m => m.Address, new { @class = "form-control", placeholder = "Address" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Address, null, new { @class = "text-danger" })
                </div>
                <div class="form-group ">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-phone"></i> </span>
                        @Html.TextBoxFor(m => m.Contact, new { @class = "form-control", placeholder = "Contact" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Contact, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-calendar"></i> </span>
                        @Html.TextBoxFor(m => m.Established, new { @class = "form-control", placeholder = "Year of Establishment" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Established, null, new { @class = "text-danger" })
                </div>
                <div class="form-group ">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-envelope"></i></span>
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-globe"></i></span>
                        @Html.TextBoxFor(m => m.Websites, new { @class = "form-control", placeholder = "Websites" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Websites, null, new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-registered"></i></span>
                        @Html.TextBoxFor(m => m.Registration_NO, new { @class = "form-control", placeholder = "Registration Number" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Registration_NO, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">V</span>
                        @Html.TextBoxFor(m => m.PAN_VAT_NO, new { @class = "form-control", placeholder = "PAN/VAT Number" })
                    </div>
                    @Html.ValidationMessageFor(m => m.PAN_VAT_NO, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">C</span>
                        @Html.TextBoxFor(m => m.HospitalCapacity, new { @class = "form-control", placeholder = "Hospital Capacity" })
                    </div>
                    @Html.ValidationMessageFor(m => m.HospitalCapacity, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">D</span>
                        @Html.TextBoxFor(m => m.DepartmentCapacity, new { @class = "form-control", placeholder = "Department Capacity" })
                    </div>
                    @Html.ValidationMessageFor(m => m.DepartmentCapacity, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">S</span>
                        @Html.TextBoxFor(m => m.SuperSpeciality, new { @class = "form-control", placeholder = "Super Speciality (If Any)" })
                    </div>
                    @Html.ValidationMessageFor(m => m.SuperSpeciality, null, new { @class = "text-danger" })
                </div>

            </div>               
        </div>             
        <button id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button>
        <div id="divSecond">             
            <div class="form-group">
                <div class="input-group">
                    @Html.TextAreaFor(m => m.Description, new { @class = "form-control DescriptionArea", placeholder = "Description" })
                </div>
                @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" })
            </div>
        </div>
    }
    </div>

Answer 1

$('#yourbuttonid').click(function () {
    $('#dividtohide').hide();
    $('#dividtoshow').show();
    return false;
});

Answer 2

以这种方式尝试：

HTML：

<div id="div1">Text1</div>
<div id="div2">Text2</div>
<button>toggle</button>

脚本：

function Togglediv() {
    if ($("#div1").is(":visible")) {
        $("#div2").hide();
    } else {
        $("#div1").show();
    }
}

Togglediv();
$("button").click(function () {
    $("#div1").toggle();
    $("#div2").toggle();
});

Answer 3

Since your are using <button> element you need to be aware of this ,

始终指定元素的type属性。不同的浏览器可能会为元素使用不同的默认类型。

你的情况下的默认值可能是提交，这导致表单提交，添加如下所示的类型属性，它应该工作

<button type="button" id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button>

隐藏/显示div而不使用javascript提交表单

3 个答案: