javascript选项卡的实现

最新推荐文章于 2023-12-05 15:10:28 发布

weixin_37370093

最新推荐文章于 2023-12-05 15:10:28 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/weixin_37370093/article/details/76186303

版权

<!DOCTYPE html>
<html>
<head>
  <style>
    #div1 .dangqian {background-color:yellow;}
    #div1 div {background-color:#a9a9a9;width:207px;height:207px;border:1px solid;
    display:none;
    }
  </style>


<script>
window.οnlοad=function(){
  var divBox=document.getElementById('div1');
  var button=divBox.getElementsByTagName('input');
  var div=divBox.getElementsByTagName('div');
  for(var i=0;i<button.length;i++){
    button[i].index=i;
    button[i].οnclick=function(){
      for(var i=0;i<button.length;i++){
        button[i].className='';
        div[i].style.display='none';
      }
      this.className="dangqian";
      div[this.index].style.display='block';
    }
  }
}
</script>
</head>
<body>


<div id="div1">
  <input class="dangqian" type="button" value="Aセット"/>
  <input type="button" value="Bセット"/>
  <input type="button" value="Cセット"/>
  <div style="display:block">111</div>
  <div>222</div>
  <div>333</div>
</div>

</body>
</html>