样式切换图

样式切换图变化代码:

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}

    #wrap{
      width: 1080px;
      height: 350px;
      margin: 50px auto;
    }

    #wrap .nav{
      position: relative;
      width: 100%;
      height: 40px;
      background-color: #f5f5f5;
      line-height: 40px;
      font-size: 14px;
    }
    #wrap .nav p{
      position: absolute;
      top: 0;
      left: 0;
      width: 130px;
      height: 40px;
      background-color: #000;
      color: #fff;
      text-align: center;
    }
    #wrap .nav ul{
      box-sizing: border-box;
      width: 100%;
      padding-left: 200px;
    }
    #wrap .nav ul li{
      position: relative;
      float: left;
      margin-right: 32px;
      cursor: pointer;
      transition: color .3s;
    }
    #wrap .nav ul li:hover{
      color: #db3a45;
    }
    #wrap .nav ul li::after{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      content: "";
      width: 0%;
      height: 2px;
      margin: auto;
      background-color: #db3a45;
      transition: width .3s;
    }
    #wrap .nav ul li.active::after{
      width: 100%;
    }
    #wrap .content{
      width: 100%;
      height: 255px;
      margin-top: 20px;
    }
    #wrap .content>ul{
      position: relative;
      width: 100%;
      height: 100%;
    }
    #wrap .content>ul li.first{
      display: none;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #wrap .content>ul li.first.show{
      display: block;
    }
    #wrap .content>ul li.first ul{
      width: 150%;
    }
    #wrap .content>ul li.first ul li{
      float: left;
      width: 340px;
      height: 255px;
      margin-right: 20px;
    }


    </style>

</head>
<body>

    <div id="wrap">
        <div class="nav">
          <p class="title">独家精品策划</p>
          <ul>
            <li class="active">全部</li>
            <li>列表一6666</li>
            <li>列表二5254</li>
            <li>列表三000</li>
            <li>列表四333</li>
          </ul>
        </div>
    
        <div class="content">
          <ul>
            <li class="first show">
              <ul>
                <li class="second"><img src="img/1.jpg" alt=""></li>
                <li class="second"><img src="img/2.jpg" alt=""></li>
                <li class="second"><img src="img/3.jpg" alt=""></li>
              </ul>
            </li>
            <li class="first">
              <ul>
                <li class="second"><img src="img/4.jpg" alt=""></li>
                <li class="second"><img src="img/5.jpg" alt=""></li>
                <li class="second"><img src="img/6.jpg" alt=""></li>
              </ul>
            </li>
            <li class="first">
              <ul>
                <li class="second"><img src="img/7.jpg" alt=""></li>
                <li class="second"><img src="img/8.jpg" alt=""></li>
                <li class="second"><img src="img/9.jpg" alt=""></li>
              </ul>
            </li>
            <li class="first">
              <ul>
                <li class="second"><img src="img/10.jpg" alt=""></li>
                <li class="second"><img src="img/11.jpg" alt=""></li>
                <li class="second"><img src="img/12.jpg" alt=""></li>
              </ul>
            </li>
            <li class="first">
              <ul>
                <li class="second"><img src="img/8.jpg" alt=""></li>
                <li class="second"><img src="img/4.jpg" alt=""></li>
                <li class="second"><img src="img/10.jpg" alt=""></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>


    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
      //样式切换图
      (function () {
          //获取需要调整的变化样式对象权限
          let Aactive = document.querySelectorAll(".nav ul li"),
              Acontent = document.querySelectorAll(".content ul li.first"),
              AactiveLen = Aactive.length;

              for (let i = 0; i <AactiveLen ; i++) {
                //li标题栏里的每项移入HTML变化
                Aactive[i].onmouseenter = function (){
                  
                  // console.log("移入了");
                  for (let j = 0; j <AactiveLen ; j++) {
                    //清除标签名字
                     Aactive[j].classList.remove("active");
                     Acontent[j].classList.remove("show");
                  };
                  //添加变化标签名字
                  this.classList.add("active");
                  Acontent[i].classList.add("show")
                }

              };


      })();

    </script>
</body>
<!--
笔记区域




-->

</html>

样式展示:

 

posted @ 2021-01-25 02:09  小衣  阅读(63)  评论(0)  编辑  收藏  举报