js 选项卡 

    <title>选项卡</title>
  <style>
    *{margin: 0;padding:0;list-style: none}
    ul{display: flex;width:400px;justify-content: space-around}
    li{width:100px;line-height:48px;text-align: center;}
        .min{position:relative;width:400px;height:400px;}
        .min div{display: none;position:absolute;left:0;top:0;width:100%;height:100%;}
        .block{display: block;}
  </style>
</head>
<body>
  <ul>
    <li style="background: red">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <div class="min">
    <div style="display: block">1</div>
    <div>2</div>
    <div>3</div>
  </div>
<script>
var li=document.getElementsByTagName('li');
var divs=document.getElementsByClassName('min')[0].getElementsByTagName('div')
var arr=['red','green','pink']
for(var i=0;i<li.length;i++){
  divs[i].style.background=arr[i];
  li[i].setAttribute('index',i);
  li[i].onclick=function () {
    for(var i=0;i<li.length;i++){li[i].style.background='';divs[i].style.display=''}
    this.style.background=arr[this.getAttribute('index')];
    divs[this.getAttribute('index')].style.display='block';
  }
}
</script>
posted @ 2021-08-13 18:33  rigorous  阅读(143)  评论(0)    收藏  举报