Method of Dynamic Hiding and Displaying JQuery DIV
- 2021-07-01 06:01:01
- OfStack
1. If the load is hidden:
<head>
<script language="javascript">
function HideWeekMonth()
{
$("#tt1").hide();
$("#tt2").hide();
}
</script>
</head>
<body onLoad="HideWeekMonth()">
</body>
2. Dynamic hide and display:
<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" />
-->
<!-- Using buttons directly id No problem
<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 also add this sentence:
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>Using jquery is really very convenient, for example, to control the display and hiding of div, one sentence is done, please see the following instructions.
$("#id").show() Denote display:block,
$("#id").hide() Denote display:none;
$("# id"). toggle () toggles 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'; PS: Here are some ways for jquery to show and hide div tags
1, $("# demo"). attr ("style", "display: none; "); //Hide div
$("#demo").attr("style","display:block;");// Display div
2. $("# demo"). css ("display", "none"); //Hide div
$("#demo").css("display","block");// Display div
3, $("# demo"). hide (); //Hide div
$("#demo").show();// Display div
4. $("# demo"). toggle (
function () {
$(this).attr("style","display:none;");// Hide div
},
function () {
$(this).attr("style","display:block;");// Display div
}
);
<div id="demo"></div>