JS控制多个div显示与隐藏的问题。
functionshowhidediv(id){varage=document.getElementById("msg_2");varname=document.getE...
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
<input name="d2" type="radio" value="1" onClick='showhidediv("name")' />
<input name="d2" type="radio" value="2" onClick='showhidediv("age")' />
<div id="msg_1">1</div>
<div id="msg_2" style="display:none;">2</div>
以上的情况测试没问题，当出现多个div就不行了，如下：
<div id="msg_1">111111</div>
<div id="msg_2" style="display:none;">222222</div>
<div id="msg_1">333333</div>
<div id="msg_2" style="display:none;">444444</div>
<div id="msg_1">555555</div>
<div id="msg_2" style="display:none;">666666</div>
请高手们帮忙看看，只有第一组管用，下面几个都不用呢
请帮忙改改js控制部分 展开
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
<input name="d2" type="radio" value="1" onClick='showhidediv("name")' />
<input name="d2" type="radio" value="2" onClick='showhidediv("age")' />
<div id="msg_1">1</div>
<div id="msg_2" style="display:none;">2</div>
以上的情况测试没问题，当出现多个div就不行了，如下：
<div id="msg_1">111111</div>
<div id="msg_2" style="display:none;">222222</div>
<div id="msg_1">333333</div>
<div id="msg_2" style="display:none;">444444</div>
<div id="msg_1">555555</div>
<div id="msg_2" style="display:none;">666666</div>
请高手们帮忙看看，只有第一组管用，下面几个都不用呢
请帮忙改改js控制部分 展开
展开全部
我晕 id是不能重复的 你换class 试试
更多追问追答
追问
师兄，换成class后，需要改js了，我又不会了
追答
嗯 我不会js jqeruy的 行不？
function showhidediv(class){
$(".msgall").hide();
$("."+class).show();
}
html
<div class="msg_1 msgall" ></div>
<div class="msg_2 msgall"></div>
<input name="d2" type="radio" value="1" onClick='showhidediv("msg_1")'>
<input name="d2" type="radio" value="1" onClick='showhidediv("msg_2")'>你只要加载jquery的那个文件就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
id是不能重复的，重复的id永远只认第一个，其它的直接忽略了，呵呵！id是具有唯一性的，所以脚本引擎找到第一个就不会再找下去了，建议你换成其它标识吧
追问
师兄，我上面的js是找的，懂得太少了，您能帮我修改下上面的js例子吗？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不用id，换成name吧
追问
师兄您能帮忙改下吗，上面那个js例子可以吗？
追答
代码如下， ：
<html>
<head>
<script type='text/javascript'>
function showhidediv(e){
var nameArr=document.getElementsByName("msg_1");
var ageArr=document.getElementsByName("msg_2");
for(var i=0;i<ageArr.length;i++){
if (e == 'name') {
if (nameArr[i].style.display=='none') {
ageArr[i].style.display='none';
nameArr[i].style.display='block';
}
} else {
if (ageArr[i].style.display=='none') {
nameArr[i].style.display='none';
ageArr[i].style.display='block';
}
}
}
document.getElementById('d1').checked = (e=='name');
document.getElementById('d2').checked = (e!='name');
}
</script>
</head>
<body>
<input id="d1" type="radio" value="1" onClick='showhidediv("name")' />
<input id="d2" type="radio" value="2" onClick='showhidediv("age")' />
<div name="msg_1">111111</div>
<div name="msg_2" style="display:none;">222222</div>
<div name="msg_1">333333</div>
<div name="msg_2" style="display:none;">444444</div>
<div name="msg_1">555555</div>
<div name="msg_2" style="display:none;">666666</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
