1, $ ("#demo"). attr ("style", "display:none;"); /Hide Div
$ ("#demo"). attr ("style", "display:block;"); /Show Div
2, $ ("#demo"). CSS ("display", "none");//Hide Div
$ ("#demo"). CSS ("Display", "block");//Display Div
3, $ ("#demo"). Hide ();//Hidden Div
$ ("#demo"). Show ();//Display Div
4, $ ("#demo"). Toggle (//dynamic display and hide
function () {
$ (this). attr ("style", "display:none;"); /Hide Div
},
Function () {$ (this). attr ("style", "display:block;"); /Show Div
}
);
<div id= "Demo" ></div>
Note:
$ ("#demo"). Show () represents Display:block,
$ ("#demo"). Hide () indicates display:none;
The Display:none in 1 and 2 can be replaced by Visibility:hidden,display:block and replaced by visibility:visible. The difference between the two is that the former does not occupy space, and the latter will occupy space after hiding.
Cases:
[JavaScript]View PlainCopy
- <script type="Text/javascript" >
- function ShowDiv1 () {
- //$ ("#test1"). attr ("style", "Display:block");
- //$ ("#test1"). Show ();
- $ ("#test1"). CSS ("display","block");
- }
- function ShowDiv2 () {
- //$ ("#test2"). attr ("style", "visibility:visible");
- $ ("#test2"). CSS ("visibility","visible");
- }
- function HiddenDiv1 () {
- $ ("#test1"). Hide ();
- }
- function HiddenDiv2 () {
- $ ("#test2"). attr ("style","Visibility:hidden");
- }
- </script>
- <body>
- <div id="test1" style="Display:none" >aaaaaa</div> <%--hidden div--%>
- <div id="test2" style="Visibility:hidden" >bbbbb</div> <%--hidden div--%>
- <button onclick="ShowDiv1 ()" > Show 1</button>
- <button onclick="ShowDiv2 ()" > Show 2</button>
- <button onclick="HiddenDiv1 ()" > Hidden 1</button>
- <button onclick="HiddenDiv2 ()" > Hidden 2</button>
- </body>
jquery shows several ways to hide a div