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

html-css028

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

//修改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 solidmargin-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>

点是使用class引用的，多个控件可以同时使用一个class，一个控件上也可以使用多个class，比如12.tdRed{border:solid1pxred}.tdBKBlue{background-color:blue}12而ID是在一个页面中唯一的总得来说class表示泛性的，id表示个性的比

HTML：

<p class="p">基础</p>

<div class="show">

<ul>

<li><a href="#">aa</a></li>

<li><a href="#">ss</a></li>

<li><a href="#">dd</a></li>

<li><a href="#">ff</a></li>

<li><a href="#">gg</a></li>

</ul>

</div>

css:

.show{

display:none

}

js:

var isClick=true

$(".p").click(function(){

if(isClick){

$(".show").css("display","block")

isClick=false

}else{

$(".show").css("display","none")

isClick=true

}

})

思路，

要显示的内容用一个div包住，当你点击基础的时候，div显示，再点击时div隐藏