Js controls are used to hide and display controls.

Source: Internet
Author: User

Js controls are used to hide and display controls.

You can use JavaScript to hide controls by setting the "display" and "visibility" attributes of the style.

When style. display = "block" or style. visibility = "visible" when the Controller or see, when style. display = "none" or style. visibility = "hidden" when the controller is invisible. The difference is that "display" not only hides the control, but hidden controls no longer occupy the position occupied by the display. The "visibility" hidden control only sets the control to invisible, the widget still occupies the original position.

Function displayHideUI () {var ui = document. getElementById ("bbs"); ui. style. display = "none";} function displayShowUI () {var ui = document. getElementById ("bbs"); ui. style. display = ""; // If the display is empty, the block will wrap the space.} 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 is not displayed.
Block: This element is displayed as a block-level element with a line break before and after it.
Inline default. This element is displayed as an inline element, and there is no line break before and after the element.
Inline-block the block element in the row. (Newly added value of CSS2.1)
List-item this element is displayed as a list.
Run-in this element is displayed as a block-level element or Inline element based on the context.
Compact CSS has the value compact, but it has been deleted from CSS2.1 due to lack of extensive support.
Marker CSS has a value of marker, but it has been deleted from CSS2.1 due to lack of extensive support.
Table: This element is displayed as a block-Level table (similar to <table>), with a line break before and after the table.
Inline-table: This element is displayed as an inline table (similar to <table>). There is no line break 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 <thead> ).
Table-footer-group: This element is displayed as a group 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 is displayed as a cell column (similar to <col>)
Table-cell: This element is displayed as a table cell (similar to <td> and <th>)
Table-caption: This element is 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 that an id is assigned to the label. error class defined by css on the jsp page, and then the js prompt information is cleared when the div is collapsed by controlling the visibility of the id. The details are as follows:
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().parent().nextAll().find(".panel").hide();var label1 = document.getElementById("label1");label1.style.display="none";})

Then add the following content to the jsp:

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>

The label defined by css. error class. You can use $ ("label. error "). removeAttr ("style "). attr ("style", "display: none;"); To implement the above functions. In addition, it seems that you do not need to define the id value for the label in the corresponding underground location.


Why does JavaScript show hidden controls?

That is, it submits and returns
You have a try
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Bt"). click (function () {detail ('select'detail .css ('display ','');
Return false;
});
});
</Script>
Last Modification
<Asp: Button ID = "bt" runat = "server" Text = "Button"/>

C # How to show hidden html controls in net and how to hide and display div

There are two ways to achieve the effect.

One is to use front-end JS Code for control.

Another method is to use a program in. CS for control.

The first method is recommended. The advantage is that the page does not require PostBack and does not consume server resources.

If you use the second method, you need to use server controls. The first method can use HTML directly or save some server resources.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.