js多个button控制多个div显示与隐藏
网页中代码<divclass="contain"><divid="survey_jianjie"><p>xqwrcrwecrern</p></div><divid="su...
网页中代码
<div class="contain">
<div id="survey_jianjie">
<p>xqwrcr wecrern</p>
</div>
<div id="survey_jigou">
<p>aertcyiyvf hwcrotc tuern</p>
</div>
<div id="survey_guanli">
<p>berchfh rcwuet yr c</p>
</div>
<div id="survey_neibu">
<p>certrertywi ycirytb tuern</p>
</div>
<div id="survey_fengcai">
<p>dterbfgggg</p>
</div>
</div>
<div class="gaikuang">
<div class="labjianjie">
<input type="button" value="实验室简介" id="bt1" onclick()="javascript:DivOpen('survey_jianjie','survey_jigou','survey_guanli','survey_neibu','survey_fengcai');" />
</div>
<div class="labjigou">
<input type="button" value="机构设置" id="bt2" onclick()="javascript:DivOpen('survey_jigou','survey_jianjie','survey_guanli','survey_neibu','survey_fengcai');"/>
</div>
<div class="labguanli">
<input type="button" value="管理人员" id="bt3" onclick()="javascript:DivOpen('survey_guanli','survey_jigou','survey_jianjie','survey_neibu','survey_fengcai');"/>
</div>
<div class="labneibu">
<input type="button" value="内部建设" id="bt4" onclick()="javascript:DivOpen('survey_neibu','survey_jigou','survey_jianjie','survey_guanli','survey_fengcai');"/>
</div>
<div class="labfengcai">
<input type="button" value="风采展示" id="bt5" onclick()="javascript:DivOpen('survey_fengcai','survey_jigou','survey_jianjie','survey_guanli','survey_neibu');"/>
</div>
</div>
js代码
function DivOpen(id1,id2,id3,id4,id5) {
var idvalue=new Array(id1,id2,id3,id4,id5);
var divs=[];
var i;
try{
for(i=0;i<5;i++){
idvs[i]=document.getElementById(idvalue[i]);
}
idvs[0].style.display="block";
for(i=1;i<5;i++){
idvs[i].style.display="none";
}
}catch(e){}
}
请问有什么问题？js运行不了 展开
<div class="contain">
<div id="survey_jianjie">
<p>xqwrcr wecrern</p>
</div>
<div id="survey_jigou">
<p>aertcyiyvf hwcrotc tuern</p>
</div>
<div id="survey_guanli">
<p>berchfh rcwuet yr c</p>
</div>
<div id="survey_neibu">
<p>certrertywi ycirytb tuern</p>
</div>
<div id="survey_fengcai">
<p>dterbfgggg</p>
</div>
</div>
<div class="gaikuang">
<div class="labjianjie">
<input type="button" value="实验室简介" id="bt1" onclick()="javascript:DivOpen('survey_jianjie','survey_jigou','survey_guanli','survey_neibu','survey_fengcai');" />
</div>
<div class="labjigou">
<input type="button" value="机构设置" id="bt2" onclick()="javascript:DivOpen('survey_jigou','survey_jianjie','survey_guanli','survey_neibu','survey_fengcai');"/>
</div>
<div class="labguanli">
<input type="button" value="管理人员" id="bt3" onclick()="javascript:DivOpen('survey_guanli','survey_jigou','survey_jianjie','survey_neibu','survey_fengcai');"/>
</div>
<div class="labneibu">
<input type="button" value="内部建设" id="bt4" onclick()="javascript:DivOpen('survey_neibu','survey_jigou','survey_jianjie','survey_guanli','survey_fengcai');"/>
</div>
<div class="labfengcai">
<input type="button" value="风采展示" id="bt5" onclick()="javascript:DivOpen('survey_fengcai','survey_jigou','survey_jianjie','survey_guanli','survey_neibu');"/>
</div>
</div>
js代码
function DivOpen(id1,id2,id3,id4,id5) {
var idvalue=new Array(id1,id2,id3,id4,id5);
var divs=[];
var i;
try{
for(i=0;i<5;i++){
idvs[i]=document.getElementById(idvalue[i]);
}
idvs[0].style.display="block";
for(i=1;i<5;i++){
idvs[i].style.display="none";
}
}catch(e){}
}
请问有什么问题？js运行不了 展开
展开全部
效果图
完整的代码和详细的说明如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="contain">
<div>
<p>xqwrcr wecrern</p>
</div>
<div>
<p>aertcyiyvf hwcrotc tuern</p>
</div>
<div>
<p>berchfh rcwuet yr c</p>
</div>
<div>
<p>certrertywi ycirytb tuern</p>
</div>
<div>
<p>dterbfgggg</p>
</div>
</div>
<div>
<div>
<input type="button" value="实验室简介" />
</div>
<div>
<input type="button" value="机构设置" />
</div>
<div>
<input type="button" value="管理人员" />
</div>
<div>
<input type="button" value="内部建设" />
</div>
<div>
<input type="button" value="风采展示" />
</div>
</div>
<script>
//找到第一个div里的5个div 简洁,设置....等
var aDiv =document.getElementsByTagName("div")[0].getElementsByTagName("div");
//通过input找到5个按钮
var aBtn = document.getElementsByTagName("input");
//按钮和div文字描述存在一一对应的关系,第几个按钮,就对应要显示的第几个div文字描述
//循环给5个按钮添加被点击时的事件
for(var i =0;i<aBtn.length;i++){
aBtn[i].index=i;//给按钮添加一个属性,代表第几个
aBtn[i].onclick = function (){//添加点击事件
for(var j= 0;j<aDiv.length;j++){ //全部不可见
aDiv[j].style.display="none";
}
aDiv[this.index].style.display="block";//第index按钮对应的div文字描述,可见
};
}
</script>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你实现的是不是下面的功能
<style type="text/css">
.contain div{ display:none;}
</style>
<div class="contain">
<div>
<p>xqwrcr wecrern</p>
</div>
<div>
<p>aertcyiyvf hwcrotc tuern</p>
</div>
<div>
<p>berchfh rcwuet yr c</p>
</div>
<div>
<p>certrertywi ycirytb tuern</p>
</div>
<div>
<p>dterbfgggg</p>
</div>
</div>
<div class="gaikuang">
<div>
<input type="button" value="实验室简介" />
</div>
<div>
<input type="button" value="机构设置"/>
</div>
<div>
<input type="button" value="管理人员"/>
</div>
<div>
<input type="button" value="内部建设" />
</div>
<div>
<input type="button" value="风采展示" />
</div>
</div>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".contain div").first().show();
$(".gaikuang :button").click(function(){
$(".contain div").eq( $(".gaikuang :button").index(this)).show().siblings().hide();
});
});
</script>
<style type="text/css">
.contain div{ display:none;}
</style>
<div class="contain">
<div>
<p>xqwrcr wecrern</p>
</div>
<div>
<p>aertcyiyvf hwcrotc tuern</p>
</div>
<div>
<p>berchfh rcwuet yr c</p>
</div>
<div>
<p>certrertywi ycirytb tuern</p>
</div>
<div>
<p>dterbfgggg</p>
</div>
</div>
<div class="gaikuang">
<div>
<input type="button" value="实验室简介" />
</div>
<div>
<input type="button" value="机构设置"/>
</div>
<div>
<input type="button" value="管理人员"/>
</div>
<div>
<input type="button" value="内部建设" />
</div>
<div>
<input type="button" value="风采展示" />
</div>
</div>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".contain div").first().show();
$(".gaikuang :button").click(function(){
$(".contain div").eq( $(".gaikuang :button").index(this)).show().siblings().hide();
});
});
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
