选项卡

发布于 2021-09-16  414 次阅读 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 *{
          margin:0px;
          padding:0px;
          list-style: none;
  }
   
  .image li{
	  display: none;
  }
  .image .active{
	  display: block;
  }
 .item li{
         width:150px;
         height:40px;
         list-style: none;
         line-height:40px;
         text-align:center;
         background:pink;
         border:1px solid white;
         float:left;
     }
 .item:after{
         content:"";
         display:block;
         width:100%;
         height:0px;
         clear:both;
  }      
  img{
	width:608px;
        height:300px;
        display: block;
   }
    </style>
</head>
<body>
    <ul id="item" class="item">
        <li id="0">1/li>
        <li id="1">2</li>
        <li id="2">3</li>
        <li id="3">4</li>
    </ul>
    <ul id="image" class="image">
        <li class="active"><img src="1.jpeg" alt=""></li>
        <li><img src="2.jpeg" alt=""></li>
        <li><img src="3.jpeg" alt=""></li>
        <li><img src="4.jpeg" alt=""></li>
    </ul>
<!--图片地址可以替换  -->
</body>
</html>
<script>

    var items = item.getElementsByTagName('li');
    var li = image.getElementsByTagName('li')
    for( i = 0; i < items.length; i++ ){
        items[i].onclick = function(){
            for(i=0;i<items.length;i++){
               li[i].style.display = 'none'
            }
            li[this.id].style.display='block'
        }
    }

</script>