JQuery shows the methods and code instances that hide DIV

2020-05-30 19:20:50
OfStack

1. If the loading is hidden:



<head>

<script language="javascript">

function HideWeekMonth()

{

    $("#tt1").hide();

    $("#tt2").hide();

}

</script>

</head>
<body onLoad="HideWeekMonth()">

</body>

2. Dynamic hiding and display:



<td>

                <!--  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;

                <br>

                <!--  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">                

                    <br>

                    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(); });

    </script>

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