js 的页面切换 

<!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>
        *{
            margin: 0px;
            padding: 0px;
        }
       
         header{
            width: 1000px;
            height: 500px;
            border: 1px solid black;
            margin: auto;
         }
         #we{
            border: 1px solid black;
         }
         #lp{
            display: flex;
            list-style: none;
         }
         #lp>li{
            flex: 1;
            border: 1px solid black;
            height: 50px;
            text-align: center;
            line-height: 50px;
         }
         nav{
            width: 100%;
            height: 450px;
            border: 1px solid red;
            position: relative;
         }
         nav>div{
              width: 100%;
              height: 450px;
              position: absolute;
             
              text-align: center;
              line-height: 450px;
              opacity: 0;
              transition: 1s;
         }
         .bhu{
            color: white;
            background-color: red;
            font-weight: 700;
            transition: 0.5s;
         }
         .mko{
            transition: 1s;
             opacity: 0;
         }
         .mk1{
            transition: 1s;
             opacity: 1;
         }
      
    </style> 
</head>
<body>
    <header>
        <div id="#we">
            <ul id="lp">
                <li>商品介绍</li>
                <li>规格与包装</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <nav id="cvb">
            <div class="mk1">商品介绍1111</div>
            <div>规格与包装5555</div>
            <div>商品评价(555555)</div>
            <div>手机社区(asdasd)</div>
        </nav>
    </header>
    <script>
          var v1=document.getElementById('lp').querySelectorAll('li')
          var koko=document.querySelector('nav').querySelectorAll('div')
          
          for (var i1=0;i1<v1.length;i1++){
                  
                  v1[i1].setAttribute('lplp',i1)  //循环自定义元素

                  v1[i1].onclick = function () {
                       for (var i=0 ;i<v1.length;i++){  
                              v1[i].className='' ////取消调其他所有的的类属性 
                       }


                       this.className='bhu'  //留下自己类属性
                       var c=this.getAttribute('lplp'); //获取自定以的值

                       for (var i2=0 ;i2<v1.length;i2++){ //取消调其他所有的的类属性  
                          koko[i2].className='mko'
                       }
                       koko[c].className='mk1'   //
                       
                  }
          }
    </script>
</body>
</html>

 

posted @ 2022-10-26 21:42  python，菜鸟  阅读(74)  评论(0)    收藏  举报