1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         .parent{
    9.             width:200px;
    10.             height: 200px;
    11.             border:1px solid #333;
    12.             position: relative;
    13.         }
    14.         .parent>div{
    15.             width:100%;
    16.             height: 100%;
    17.             position: absolute;
    18.         }
    19.         .html{
    20.             background-color: red;
    21.             z-index: 100;
    22.         }
    24.         .css{
    25.             background-color: yellow;
    26.         }
    27.         .current{
    28.             color:orange;
    29.         }
    30.         li{
    31.             cursor: pointer;
    32.         }
    33.     </style>
    34. </head>
    35. <body>
    36.     <ul>
    37.         <li class="current">html</li>
    38.         <li>css</li>
    39.     </ul>
    40.     <div class="parent">
    41.         <div class="html">
    42.             html
    43.         </div>
    44.         <div class="css">
    45.             css
    46.         </div>
    47.     </div>
    48.     <script>
    49.         var lis = document.getElementsByTagName("li");
    50.         var divs = document.querySelectorAll(".parent div");
    52.         for(let i=0;i<lis.length;i++){
    53.             lis[i].index = i;
    54.             lis[i].onclick  =  function(){
    55.                 /* 1.遍历让所有的li移除class="current" */
    56.                 for(let i=0;i<lis.length;i++){
    57.                     lis[i].classList.remove("current");
    58.                 }
    59.                 /* 2.让当前元素添加class="current" */
    60.                 this.classList.add("current")
    61.                 console.log(this.index)
    64.                 /* 3.让所有的div隐藏 */
    65.                 for(let i=0;i<divs.length;i++){
    66.                     divs[i].style.display = "none"
    67.                 }
    68.                 /* 4.让对应的下标的div去显示 */
    69.                 divs[this.index].style.display = "block";
    71.             }
    72.         }
    74.     </script>
    75. </body>
    76. </html>

    1.PNG