js 控制几个div,只有第一个有效果,因为字数限制，只贴了第一个显示的，其他几个和第一个一模一样、

<styletype="text/css">#main{width:500px;font-size:12px;border:1pxsolid#FFC44C;}#box1{... <style type="text/css">

#main { width:500px; font-size:12px; border:1px solid #FFC44C; }
#box1 { width:500px; height:80px; }
.box2 { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFC44C solid; }
.boxS { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; }
.box3 { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; }
.boxt { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; }
#box4 { width:500px; height:5px; background:#FFF7E5; position:relative; }
#box4 span { width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; }
</style>
<script type="text/javascript">
window.onload=function(){
var box_2 = document.getElementById("box2");
var box_3 = document.getElementById("box3");
var box_4 = document.getElementById("box4").getElementsByTagName("span")[0];
box_4.onclick=function(){
box_3.className=(box_3.className=="box3")?"boxt":"box3";
box_2.className=(box_2.className=="boxS")?"box2":"boxS";
this.innerHTML=(this.innerHTML=="Show")?"Hidden":"Show";
}

}
</script>
</head>
<body>
<div id="main">
<div id="box1"></div>
<div id="box2" class="boxS"></div>
<div id="box3" class="box3">
<ul>
<li>test</li>
<li>test</li>
</ul>
</div>
<div id="box4"><span>Show</span></div>
</div>

</body>
</html> 展开

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

百度网友46b235f5b2
推荐于2016-08-05 · TA获得超过1397个赞

知道小有建树答主

回答量：676

采纳率：100%

帮助的人：632万

我也去答题访问个人页

关注

展开全部

//修改2处：1>将css中的#main改成.main  2>将div中的id="main"改成class="main"
<html>
<style type="text/css">

.main { width:500px; font-size:12px; border:1px solid #FFC44C; }
#box1 { width:500px; height:80px; }
.box2 { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFC44C solid; }
.boxS { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; }
.box3 { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; }
.boxt { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; }
#box4 { width:500px; height:5px; background:#FFF7E5; position:relative; }
#box4 span { width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; }
</style>
<script type="text/javascript">
window.onload=function(){
    var box4 = document.getElementsByClassName('main');
    for(var i in box4){
        box4[i].getElementsByTagName("span")[0].onclick=function(){
            var box3 = this.parentNode.parentNode.getElementsByClassName('box3')[0];
            var box2 = this.parentNode.parentNode.getElementsByClassName('boxS')[0];
            if(!box3)
                box3 = this.parentNode.parentNode.getElementsByClassName('boxt')[0];
            if(!box2)
                box2 = this.parentNode.parentNode.getElementsByClassName('box2')[0];
            box3.className=(box3.className=="box3")?"boxt":"box3";
            box2.className=(box2.className=="boxS")?"box2":"boxS";
            this.innerHTML=(this.innerHTML=="Show")?"Hidden":"Show";
        }
    }
}
</script>
</head>
<body>
<div class="main">
  <div id="box1"></div>
  <div id="box2" class="boxS"></div>
  <div id="box3" class="box3">
    <ul>
      <li>test</li>
      <li>test</li>
     </ul>
  </div>
  <div id="box4"><span>Show</span></div>
</div>
<div class="main">
  <div id="box1"></div>
  <div id="box2" class="boxS"></div>
  <div id="box3" class="box3">
    <ul>
      <li>test</li>
      <li>test</li>
     </ul>
  </div>
  <div id="box4"><span>Show</span></div>
</div>
<div class="main">
  <div id="box1"></div>
  <div id="box2" class="boxS"></div>
  <div id="box3" class="box3">
    <ul>
      <li>test</li>
      <li>test</li>
     </ul>
  </div>
  <div id="box4"><span>Show</span></div>
</div>

</body>
</html>

已赞过 已踩过<

评论收起

g0063606
2014-03-10 · TA获得超过371个赞

知道小有建树答主

回答量：476

采纳率：0%

帮助的人：434万

我也去答题访问个人页

关注

展开全部

大概就是ID重复引用的问题了

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js 控制几个div,只有第一个有效果,因为字数限制，只贴了第一个显示的，其他几个和第一个一模一样、

其他类似问题

为你推荐：