Question

我有多个部分的长页面。

<div class="section">Client Information </div>
<div class="section">Billing Information </div>
<div class="section">Contact Information </div>

div中有多个字段。当用户提交表单时，表单会收到错误列表。我在展开/折叠div中显示所有错误。
是否可以逐节滚动页面？因此，错误div可以保留在每个部分的顶部。找到HTML代码here。

Answer 1

希望这是你想要的。随意报告更改。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
    .section {
    margin: 1.250em 0;
    padding: 1.6em 0.2em 1.0em;
    background-color: #f7f7f7;
}

.sectionTitle {
    font-size:16px;
    font-weight:bold;
}

.panel-group{
    position:fixed;
    z-index:2147483647;
    width:100%;
}

</style>
<div class="panel-group" id="errors">
    <div class="panel panel-danger">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Error(s)
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                        <tr class="active">
                            <th>Error Message</th>
                            <th>Error Code</th>
                            <th>Results</th>
                        </tr>
                    </thead>
                </table>              
            </div>
          </div>
        </div>



      </div>
<div class="section" name="ClientInfo" id="ClientInfo">
    <div class="row field sectionTitle">
        <div class="col-md-6">
                <span class="section-title">Section: Client Info </span>
                        </div>
     </div>
      <div class="row field"> <!-- row starts --->
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 2 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        Customer First Name</label>
    <input type="text" name="FirstName" class="form-control" required="">
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 1 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        Customer Last Name</label>
    <input type="text" name="LastName" class="form-control" required="">
      </div>
      </div> <!-- row ends -->

</div>
<div class="section" name="ClientInformation" id="ClientInformation">
    <div class="row field sectionTitle">
        <div class="col-md-6">
                <span class="section-title">Section: Address Information </span>
         </div>
     </div>
      <div class="row field"> <!-- row starts --->
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 2 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        Street Address</label>
    <input type="text" name="FirstName" class="form-control" required="">
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 1 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        Apt</label>
    <input type="text" name="LastName" class="form-control" required="">
      </div>
      </div> <!-- row ends -->
          <div class="row field"> <!-- row starts --->
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 2 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        City</label>
    <input type="text" name="FirstName" class="form-control" required="">
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 form-inline"> <!-- column 1 -->
        <label class="pocLabel">
            <span style="color:red;">*</span>
        Country</label>
    <input type="text" name="LastName" class="form-control" required="">
      </div>
      </div> 

</div>

更改错误div的位置，使其保持在每个div部分的顶部

1 个答案: