There are two ways to hide controls using JavaScript, namely by setting the "display" and "visibility" properties of the control's style.
The control is not visible when style.display="block" or style.visibility="visible". The difference is that "display" not only hides the control, but also the hidden control no longer occupies the position occupied when displayed. The hidden control in "visibility" just sets the control to be invisible, and the control still occupies its original position.
function displayHideUI(){var ui =document.getElementById("bbs");ui.style.display="none";}function displayShowUI(){var ui =document.getElementById("bbs");ui.style.display="";//If display is empty, it will work well. Block will cause the subsequent space to be wrapped}function visibilityHideUI(){var ui =document.getElementById("bbs");ui.style.visibility="hidden";}function visibilityShowUI(){var ui =document.getElementById("bbs");ui.style.visibility="visible";}</script>Value description
none This element will not be displayed.
block This element will be displayed as a block-level element, with line breaks before and after.
inline default. This element will be displayed as an inline element, with no newline characters before and after the element.
inline-block Inline block element. (New value added in CSS2.1)
list-item This element is displayed as a list.
run-in This element is displayed as a block-level element or an inline element based on the context.
compact There is a value compact in CSS, but it has been removed from CSS2.1 due to lack of extensive support.
marker There is a value marker in CSS, but it has been removed from CSS2.1 due to lack of extensive support.
table This element is displayed as a block-level table (similar to <table>), with line breaks before and after the table.
inline-table This element is displayed as an inline table (similar to <table>), with no newline characters before and after the table.
table-row-group This element is displayed as a group of one or more rows (similar to <tbody>).
table-header-group This element is displayed as a group of one or more rows (similar to <head>).
table-footer-group This element is displayed as a grouping of one or more rows (similar to <tfoot>).
table-row This element is displayed as a table row (similar to <tr>).
table-column-group This element is displayed as a group of one or more columns (similar to <colgroup>).
table-column This element will be displayed as a cell column (similar to <col>)
table-cell This element will be displayed as a table cell (similar to <td> and <th>)
table-caption This element will be displayed as a table title (similar to <caption>)
inherit Specifies that the value of the display attribute should be inherited from the parent element.
The problem solved today is to give the class label.error defined in the jss page an id, and then control the visibility of the id to clear the js prompt information when closing the div. The details are as follows:
In the function preparing the interface var label1 = document.getElementById("label1");
$(document).ready(function() {$(".flipp .span4").click(function() {$(this).parent().next().toggle();$(this).parent().parent().prevAll().find(".panel").hide();$(this).parent().nextAll().find(".panel").hide();var label1 = document.getElementById("label1");label1.style.display="none";})Then add in jsp corresponding place:
<label id="label1" for="currentPWD" generated="true" style="display:inline"></label>
For the label.error class defined by css, you can use $("label.error").removeAttr("style").attr("style", "display: none;"); to implement the above functions. Moreover, it seems that there is no need to define the id value for labels at the corresponding location underground.