1. 首页
  2. 问题
  3. 页面的设计[，， 在JSP中](file:///C://Users//ghz//Desktop//all//CodingDict-Local//%E7%88%AC%E8%99%AB//pages//jsp/page_27_03.html)
一尘不染

页面的设计[，， 在JSP中](file:///C://Users//ghz//Desktop//all//CodingDict-Local//%E7%88%AC%E8%99%AB//pages//jsp/page_27_03.html)

jsp

[

我收到了一项向HTML页面（JSP）添加功能的任务。该页面仅来自设计师/前端开发人员，因此在某些地方，我需要更改a href为button或，input但是它一团糟，所有设计都已更改。这是一段代码：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <a href="#" class="listItem" id="edit">
                    <span class="editicon">Edit</span>
                </a>
            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>

我希望它像下面这样，而不改变外观：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="/register/studentSignup" type="submit" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="/register/studentSignup" type="submit" id="addButton">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
                <span class="editicon">Edit</span>
            </li>
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
                <span class="parentInfo">Parent Info</span>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="upgrade" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
        <input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    </nav>

](file:///C://Users//ghz//Desktop//all//CodingDict-
Local//%E7%88%AC%E8%99%AB//pages//jsp/page_27_03.html)


阅读 207

收藏
2020-06-08

共1个答案

一尘不染

[

您不应更改提供给您的设计。在HTML中添加/更改 可见 元素会更改布局。

同样进行修改，不仅会给设计带来麻烦，还会给HTML代码增加错误。

定位标记没有type="submit"属性。此属性在按钮和input元素中可用。

修改href链接的属性可使URL在悬停时可见。这不是设计人员强加的预期行为。可能他/她应该为您提供指导，说明如何继续执行代码以不更改设计。在这种情况下onclick，onsubmit事件可以使用javascript函数处理以提交表单。

在此示例中，您可以提交带有验证的表单。

注意： 该代码仅适用于Edit按钮。

](file:///C://Users//ghz//Desktop//all//CodingDict-
Local//%E7%88%AC%E8%99%AB//pages//jsp/page_27_03.html)

``JSFiddle

HTML：

<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>                  
                <a href="#" class="listItem" id="edit"  onclick="doSubmit()">
                    <span class="editicon">Edit</span>
                </a>
                <input type="hidden" name="param" value="editParentInfo"/>

            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>
    </div>
</form>

JavaScript：

function doSubmit() {
    alert("The form is submitting"); 
    var form =  document.getElementById("editForm");
    form.action="/register/studentSignup";
    form.method="post";
    submitForm(form);
}

function doValidate() {
  var form =  document.getElementById("editForm");
  alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value); 
  return false;
}

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}
2020-06-08