html js按钮弹出的一个代码问题 请高手路过帮忙解答，万分感谢！
效果要求：几个按钮分别关联了1、2、3div的弹出事件，点击按钮后将会弹出相关div层，然后其余几个未点击的退回这样的效果用js的指令怎么实现呢？【小要求，要有扩展能力，...
效果要求：几个按钮分别关联了1、2、3div的弹出事件，点击按钮后将会弹出相关div层，然后其余几个未点击的退回这样的效果用js的指令怎么实现呢？【小要求，要有扩展能力，按钮可能不止3个】
css的hove事件做过，不太理想，js的话使用if命令判断然后做出样式调整也试过，效果出来了，但是没有扩展能力，思路是这样的，新手轻喷T_T。
判断哪个按钮点击，展开相关的DIV，然后将之前点击的按钮以及其样式恢复到初始化。（ps：如果有50个按钮，我就要改写49个按钮的样式，因为我不知道用户点击了哪个按钮T_T，想想都有些可怕。
并且增加一个按钮，就要调整全部代码，效率也十分低下。
求教javascript方面的高手大虾。这段js脚本该怎么写呢？如果好的，我追加高分，十分感谢！ 展开
css的hove事件做过，不太理想，js的话使用if命令判断然后做出样式调整也试过，效果出来了，但是没有扩展能力，思路是这样的，新手轻喷T_T。
判断哪个按钮点击，展开相关的DIV，然后将之前点击的按钮以及其样式恢复到初始化。（ps：如果有50个按钮，我就要改写49个按钮的样式，因为我不知道用户点击了哪个按钮T_T，想想都有些可怕。
并且增加一个按钮，就要调整全部代码，效率也十分低下。
求教javascript方面的高手大虾。这段js脚本该怎么写呢？如果好的，我追加高分，十分感谢！ 展开
1个回答
展开全部
这个很简单的啊，会用jquery吗，或者js一个循环就可以，管你有多少个按钮，直接一循环出来就可以了。
追问
能简单的写一段供我参考么？不需要样式什么的，就简单的写一下js的相关代码。
在线等啊~
追答
<html>
<head>
<meta charset="utf-8" />
</head>
<form name="form1">
<input type="button" name="btn" id="1" value="click1"/><br>
<input type="button" name="btn" id="2" value="click2"/><br>
</form>
<div id="tan">
<div class="tan" style="background:#ccc;width:100px;height:100px;position:relative;line-height:100px;display:none">弹出层1</div>
<div class="tan" style="background:#ccc;width:100px;height:100px;position:relative;line-height:100px;display:none">弹出层2</div>
</div>
<script>
function js(id){ return document.getElementById(id) }
var btn = document.forms['form1'];
var i=0;
for(i;i < btn.btn.length;i++)
{
document.forms['form1'].btn[i].onclick = function ()
{
var son = js("tan").getElementsByTagName("div")[Number(this.id) - 1 ];
hide();
son.style.display = 'block';
}
}
function hide()
{
for(var j = 0;j<js("tan").getElementsByTagName("div").length;j++)
{
js("tan").getElementsByTagName("div")[j].style.display = 'none';
}
}
</script>
</html>
大致的原型就是这样，当你复制很多个按钮和弹出层的时候，记得改一下按钮里面的那个id的数字就可以无限用了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
