javascript怎么显示css隐藏的元素
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Workshop 5 – Challenge 1</title>
<style type="text/css">
p.hidden {display:none;}
</style>
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
document.getElementById("show").style.display = "block";
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="p_Subscribe">
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onclick="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
</p>
<div id="show" style="display:none">
<p id="p_Email" class="hidden">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail">
</label>
</p>
</div>
</form>
</body>
</html>
想在选择checkbox后把email address 和 textbox 显示出来，请各位高手帮帮忙 展开
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Workshop 5 – Challenge 1</title>
<style type="text/css">
p.hidden {display:none;}
</style>
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
document.getElementById("show").style.display = "block";
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="p_Subscribe">
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onclick="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
</p>
<div id="show" style="display:none">
<p id="p_Email" class="hidden">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail">
</label>
</p>
</div>
</form>
</body>
</html>
想在选择checkbox后把email address 和 textbox 显示出来，请各位高手帮帮忙 展开
10个回答
展开全部
思路：
css隐藏的元素大部分都是display：none的元素。
用js获取响应的元素，然后修改style属性即可
例子：
<table>
<tr id="menu" >
<td>控制这个tr的显示/隐藏</td>
</tr>
</table>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。
当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你最外层的#show给了display:none，然后p.hidden又给了display:none
但是你js哪里只写了一个显示，还有另一个隐藏的没有显示，所以就不会显示了
但是你js哪里只写了一个显示，还有另一个隐藏的没有显示，所以就不会显示了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你多写了一个css，.hidden这个类不必要，因为它们的父容器div已经被display:none了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Workshop 5 – Challenge 1</title>
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
if(document.getElementById("cbSubscribe").checked)
document.getElementById("show").style.display = "block";
else
document.getElementById("show").style.display = "none";
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="p_Subscribe">
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onclick="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
</p>
<div id="show" style="display:none">
<p id="p_Email" class="hidden">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail" onclick="ToggleEmail()">
</label>
</p>
</div>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Workshop 5 – Challenge 1</title>
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
if(document.getElementById("cbSubscribe").checked)
document.getElementById("show").style.display = "block";
else
document.getElementById("show").style.display = "none";
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="p_Subscribe">
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onclick="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
</p>
<div id="show" style="display:none">
<p id="p_Email" class="hidden">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail" onclick="ToggleEmail()">
</label>
</p>
</div>
</form>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我给你修改了一下， 先把<p id="p_Email" class="hidden">
改成<p id="p_Email" >
然后你的脚本我给你完善了一下，选中的时候显示，不选中的时候让它再隐藏回去。 你的脚本只让他显示了 ，但是如果我取消选中的话那个层还是显示的，所以给你把脚本改了一下：
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
cb = document.getElementById("cbSubscribe");
if (cb.checked) {
document.getElementById("show").style.display = "block";
}
else
document.getElementById("show").style.display = "none";
}
</script>
改成<p id="p_Email" >
然后你的脚本我给你完善了一下，选中的时候显示，不选中的时候让它再隐藏回去。 你的脚本只让他显示了 ，但是如果我取消选中的话那个层还是显示的，所以给你把脚本改了一下：
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
cb = document.getElementById("cbSubscribe");
if (cb.checked) {
document.getElementById("show").style.display = "block";
}
else
document.getElementById("show").style.display = "none";
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（8）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
