HTML的

最新推荐文章于 2024-07-25 09:24:40 发布

接着看日落

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量28

点赞数

文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/2301_77161151/article/details/134636865

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }
           .boss {
               width: 300px;
               height: 600px;
               border: 3px solid skyblue;
           }
           .box1 {
               width: 295px;

               border: 3px solid skyblue;
           }
           .box2 {
               width: 295px;

               border: 3px solid skyblue;
           }
           .an1 {
               position: relative;
               left: 80%;
               top: -20%;
           }
           .an2 {
               position: relative;
               left: 80%;
               top: -20%;
           }

           .boss2 {
               width: 300px;
               height: 600px;
               border: 3px solid aqua;
               position: absolute;
               left: 20%;
               top: 0;
           }
           li{
               display: none;
           }
           .u1{
               width: 100%;
               height: ;
           }
           .u2{
               width: 100%;
               height: ;
           }
       </style>
   </head>
   <body>
       <div class="boss">
           <div class="box1">
                   <div class="u1" οnclick="func1()">分组first</div>
                   <li>1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
               <button type="button" οnclick="func3()" class="an1">+</button>
           </div>
           <div class="box2">
               <ul>
                   <div class="u2" οnclick="func2()">分组second</div>
                   <li>5</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
               </ul>
               <button type="button" οnclick="func4()" class="an2">+</button>
           </div>
       </div>
       <div class="boss2">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </div>
   </body>
   <script type="text/javascript">
       var u1 = document.querySelector(".u1");
       var u2 = document.querySelector(".u2");
       var li1 = document.querySelectorAll(".box1 li");
       var li2 = document.querySelectorAll(".box2 li");
       var bosli = document.querySelectorAll(".boss2 li");
       var num=1;
       var numm=1;
       function func1(){
           if(num==1){
               for(let i = 0;i<li1.length;i++){
               li1[i].style.display="block";
       num=2;
           }
           }else if(num==2){
               for(let i = 0;i<li1.length;i++){
                   li1[i].style.display="none";
                   num=1;
               }
           }
       }
       function func2(){
           if(numm==1){
               for(let i = 0;i<li2.length;i++){
               li2[i].style.display="block";
       numm=2;
           }
           }else if(numm==2){
               for(let i = 0;i<li2.length;i++){
                   li2[i].style.display="none";
                   numm=1;
               }
           }
       }
       for(let i=0 ;i<4;i++){
           li1[i].οnclick=function(){
               bosli[i].style.display="block";
           }
           li2[i].οnclick=function(){
               bosli[i+4].style.display="block";
           }

       }

       for(let b=0;b<bosli.length;b++){
           bosli[b].οnclick=function(){
               bosli[b].style.display="none";
           }
       }
       function func3(){
           for(let i=0 ;i<4;i++){
               bosli[i].style.display="block";
           }
       }
       function func4(){
           for(let i=0 ;i<4;i++){
               bosli[i+4].style.display="block";
           }
       }
   </script>
</html>