JQuery shows the methods and code instances that hide DIV

  • 2020-05-30 19:20:50
  • OfStack

1. If the loading is hidden:

<script language="javascript">
function HideWeekMonth()
</head> <body onLoad="HideWeekMonth()">

2. Dynamic hiding and display:

                <!-- Can be used
                <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" />
                <!-- Directly using buttons id There is 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']?>&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="btnDay" type="radio" name="frequence" value="2"><?php echo $ini_array['time.day']?>&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="btnWeek" type="radio" name="frequence" value="3"><?php echo $ini_array['time.week']?>&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="btnMonth" type="radio" name="frequence" value="4"><?php echo $ini_array['time.month']?>&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- Can be used
                <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">               
                    1&nbsp;<input type="checkbox" value="1" name="w1">&nbsp;&nbsp;&nbsp;&nbsp;
                    2&nbsp;<input type="checkbox" value="1" name="w2">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div id="tt2">               
03&nbsp;<input type="checkbox" name="m3">&nbsp;&nbsp;&nbsp;&nbsp;
                    04&nbsp;<input type="checkbox" name="m4">&nbsp;&nbsp;&nbsp;&nbsp;</div>
          </td>     <!-- Binding events appear 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(); });

You might want to add this sentence to the code above:

<script type="text/javascript" src="../../scripts/jquery.min.js"></script>

It is really convenient to use jquery. For example, to control the display and hiding of div, you only need to use one sentence. Please refer to the instructions below.

$(" # id "). show display () said: block,
$(" # id "). hide display () said: 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")[0].style.display = 'none';

Related articles: