如何使用js动态显示或隐藏DIV


http://www.w3school.com.cn

https://blog.csdn.net/qq_15037231/article/details/78855099

https://blog.csdn.net/liuhailiuhai12/article/details/56297897

-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

function display(id){
var traget=document.getElementById(id);
if(traget.style.display=="none"){
traget.style.display="";
}else{
traget.style.display="none";
}
}
</script>

<input type="submit" value="在线支付" onclick="display('lb')">
<div id="lb" style="display:none">
<font>div属性:style ="display:none" 默认隐藏div</font>
</div>

<input type="submit" value="TEST" onclick="display('test')">
<fieldset id="test" style="display:none">
<legend>健康信息</legend>
体重:<input type="text" />
</fieldset>
<div><input type="text" value="在线她她她支付" >

</body>
</html>

 

--------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<script src="jquery.js"></script>
</head>
<body>
<form action="#" id="form">
<input type="checkbox" name="city" value="南京">南京
<input type="checkbox" name="city" value="北京">北京
<input type="checkbox" name="city" value="纽约">纽约
<input type="checkbox" name="city" value="其他" id="other" onclick="change()">其他
<input type="text" style="display: none" id="txt">
<input type="checkbox" name="city" value="南京">南京
<input type="checkbox" name="city" value="北京">北京
<input type="checkbox" name="city" value="纽约">纽约
</form>
<script>
function change() {
var other = document.getElementById("other");
var txt = document.getElementById("txt");
if (other.checked == true) {
txt.style.display = "block";
}else{
txt.style.display = "none";
}
}
</script>
</body>
</html>

--------------------------------------------------------------------------------------------

<html>
<title>通过选择项显示不同的结果</title>
<head>
<script type="text/JavaScript">
function showdiv()
{
var doc=document;
var citytext=doc.getElementById("city").value;
var div1=doc.getElementById("div1");
var div2=doc.getElementById("div2");
var div3=doc.getElementById("div3");
switch (citytext)
{
case "广州":
div1.setAttribute("style","display");
div2.setAttribute("style","display:none");
div3.setAttribute("style","display:none");
doc.getElementById("text1").value=citytext;
break;
case "南昌":
div1.setAttribute("style","display:none");
div2.setAttribute("style","display");
div3.setAttribute("style","display:none");
doc.getElementById("text2").value=citytext;
break;
case "沈阳":
div1.setAttribute("style","display:none");
div2.setAttribute("style","display:none");
div3.setAttribute("style","display");
doc.getElementById("text3").value=citytext;
break;
}
}
</script>
</head>
<body>
<select title="城市" id="city" onchange="showdiv()">
<option selected value="广州">广州</option>
<option value="南昌">南昌</option>
<option value="沈阳">沈阳</option>
</select>
<div id="div1" style="display:none" >您选择了广东的省会<input type="text" id="text1" value=""/></div>
<div id="div2" style="display:none" >您选择了江西的省会<input type="text" id="text2" value=""/></div>
<div id="div3" style="display:none" >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>
</body>
</html>

 

---------------------------------------------------------------------

 

<!DOCTYPE HTML>
<html>

<body>

<form>
<fieldset>
<legend>健康信息</legend>

身高:<input type="text" />
<fieldset>
<legend>健康信息</legend>
体重:<input type="text" />
</fieldset>

</fieldset>
</form>

<p>如果表单周围没有边框,说明您的浏览器太老了。</p>

</body>
</html>

----------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>

<form action= method=post >
<input name="dj" type="radio" value="0" checked> 否
<input name="dj" type="radio" value="1"> 是
<input name="djs" type="text" id="djs" disabled="disabled" value="填写定金数额" size="15">
</form>
<script type="text/javascript">
window.onload = function() {
var rd = document.getElementsByName('dj'), txt = document.getElementById('djs');
for(var i = 0, len = rd.length; i < len; i++) {
rd[i].onclick = function() {txt.disabled = this.value == '0';}
}
}
</script>

</body>
</html>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM