JQuery DIV 动态隐藏和显示的方法

前端技术 2023/09/02 JavaScript

1. 如果在载入是隐藏：

<head>
<script language=\"javascript\">
function HideWeekMonth()
{
$(\"#tt1\").hide();
$(\"#tt2\").hide();
}
</script>
</head>
<body onLoad=\"HideWeekMonth()\">
</body>

2. 动态隐藏和显示：

<td>
<!-- 能用
<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\" /> 
-->
<!-- 直接使用按钮的id没有问题
<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>
<!-- 能用
<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>
<!-- 绑定事件似乎要写在被绑定对象的后面 -->
<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>

以上代码之前，可能还要加上这句话：

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

使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。

$(\"#id\").show()表示display:block, 
$(\"#id\").hide()表示display:none;

$(\"#id\").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$(\"#id\").css(\'display\',\'none\'); 
$(\"#id\").css(\'display\',\'block\');

或 

$(\"#id\")[0].style.display = \'none\';

PS：下面给大家介绍jquery显示隐藏div标签的几种方法

1、$(\"#demo\").attr(\"style\",\"display:none;\");//隐藏div

$(\"#demo\").attr(\"style\",\"display:block;\");//显示div

2、$(\"#demo\").css(\"display\",\"none\");//隐藏div

$(\"#demo\").css(\"display\",\"block\");//显示div

3、$(\"#demo\").hide();//隐藏div

$(\"#demo\").show();//显示div

4、$(\"#demo\").toggle(

function () {
$(this).attr(\"style\",\"display:none;\");//隐藏div
},
function () {
$(this).attr(\"style\",\"display:block;\");//显示div
}
);
<div id=\"demo\"></div>

本文地址：https://www.stayed.cn/item/4044

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案