JQuery shows the method and code instance for hiding the DIV, and jquerydiv code instance.
1. If it is hidden during loading:
Copy codeThe Code is as follows:
<Head>
<Script language = "javascript">
Function HideWeekMonth ()
{
$ ("# Tt1"). hide ();
$ ("# Tt2"). hide ();
}
</Script>
</Head>
<Body onLoad = "HideWeekMonth ()">
</Body>
2. dynamically hide and display:
Copy codeThe Code is as follows:
<Td>
<! -- Usable
<Input id = "btnShow" type = "button" value = "<? Php echo $ ini_array ['module. insert'];?> "Class =" btn "/>
<Input id = "btnHide" type = "button" value = "<? Php echo $ ini_array ['module. insert'];?> "Class =" btn "/>
-->
<! -- The button id is correct.
<Input id = "tt" type = "text" name = "title" maxlength = "50" size = "50"> </td> -->
<Input id = "btnOne" type = "radio" name = "frequence" value = "1" checked = 'checked'> <? Php echo $ ini_array ['time. one']?>
<Input id = "btnDay" type = "radio" name = "frequence" value = "2"> <? Php echo $ ini_array ['time. Day']?>
<Input id = "btnWeek" type = "radio" name = "frequence" value = "3"> <? Php echo $ ini_array ['time. week ']?>
<Input id = "btnMonth" type = "radio" name = "frequence" value = "4"> <? Php echo $ ini_array ['time. month']?>
<Br>
<! -- Usable
<Div id = "tt1"> <input type = "text" name = "title" maxlength = "50" size = "50" value = "tt1"> </div>
<Div id = "tt2"> <input type = "text" name = "title" maxlength = "50" size = "50" value = "tt2"> </div>
-->
<Div id = "tt1">
<Br>
1 <input type = "checkbox" value = "1" name = "w1">
2 <input type = "checkbox" value = "1" name = "w2"> </div>
<Div id = "tt2">
03 <input type = "checkbox" name = "m3">
04 <input type = "checkbox" name = "m4"> </div>
</Td>
<! -- The binding event seems to be written after the bound object -->
<Script type = "text/javascript">
$ ("# BtnOne "). bind ("click", function (event) {$ ("# tt1 "). hide (); $ ("# tt2 "). hide ();});
$ ("# BtnDay "). bind ("click", function (event) {$ ("# tt1 "). hide (); $ ("# tt2 "). hide ();});
$ ("# BtnWeek "). bind ("click", function (event) {$ ("# tt1 "). show (); $ ("# tt2 "). hide ();});
$ ("# BtnMonth "). bind ("click", function (event) {$ ("# tt1 "). hide (); $ ("# tt2 "). show ();});
</Script>
Before the above Code, you may need to add this sentence:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = ".../scripts/jquery. min. js"> </script>
Jquery is really easy to use. For example, to control the display and hiding of div, you can do it in one sentence. See the following instructions.
$ ("# Id"). show () indicates display: block,
$ ("# Id"). hide () indicates display: none;
$ ("# Id"). toggle () switches the visible state of the element. If the element is visible, switch to hidden. If the element is hidden, switch to visible.
$ ("# Id" ).css ('display', 'None ');
$ ("# Id" ).css ('display', 'block ');
Or
$ ("# Id") [0]. style. display = 'none ';