Tap切换

羽羽Ci Ci

于 2024-09-30 11:16:36 发布

阅读量18

点赞数

文章标签： javascript css3 html5 css 前端框架

本文链接：https://blog.csdn.net/2401_83905000/article/details/142652847

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
ul{
    background-color: azure;
}
li{
    display:inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
div{
    display: none;
    border: 1px red solid;
}
    </style>
</head>
<body>
    <ul>
        <li num="0" style="background-color:red;color:white">商品介绍</li>
        <li num="1">规格与包装</li>
        <li num="2">售后保障</li>
        <li num="3">商品评价</li>
    </ul>
    <div >
        <div style="display: block;">
            品牌：康佳（KONKA）商品编号：8514653 商品毛重：31.35kg
        </div>
        <div>
         观看距离
        </div>
        <div >
          屏幕尺寸
        </div>
    </div>
</div>
</body>
<script>
     var lis=document.querySelectorAll("li")
     for(var i=0;i<lis.length;i++){
         lis.onclick=function(){
             for(var j=0;i<lis.length;j++){
                 lis[j].style.backgroundColor=""
                 lis[j].style.color=""

             }
             this.style.backgroundColor="red"
             this.style.color="white"
             var num=this.getAttribute("num")
             var divs=document.querySelectorAll("div")
             for(var z=0;z<divs.length;z++){
                 div[z].style.display="none"

             }
             divs[num].style.display="block"
         }

     }
</script>
</html>