1. //css
    2.  .parent {
    3.             width: 200px;
    4.             height: 200px;
    5.             position: relative;
    6.         }
    7.         .parent>div {
    8.             width: 100%;
    9.             height: 100%;
    10.             position: absolute;
    11.         }
    12.         .html {
    13.             background-color: pink;
    14.         }
    15.         .css {
    16.             background-color: yellow;
    17.         }
    18.         .current {
    19.             color: red;
    20.         }
    22. //html
    23. <ul>
    24.         <li>html</li>
    25.         <li>css</li>
    26.     </ul>
    27.     <div class="parent">
    28.         <div class="html">html</div>
    29.         <div class="css">css</div>
    30.     </div>
    32. //script
    33. var lis = document.getElementsByTagName("li");
    34.         var divs=document.querySelectorAll(".parent div");
    35.         for(let i=0;i<lis.length;i++){
    36.             lis[i].index=i;
    37.             lis[i].onclick =function(){
    38.                 //1.遍历让所有的li移除current样式
    39.                 for(let i=0;i<lis.length;i++){
    40.                     lis[i].classList.remove("current");
    41.                 }
    42.                 //2.让当前元素添加current样式
    43.                 this.classList.add("current");
    44.                 console.log(this.index);
    46.                 //3.染发所有div隐藏
    47.                 for(let i=0;i<divs.length;i++){
    48.                     divs[i].style.display="none";
    49.                 }
    50.                 divs[this.index].style.display="block";
    51.             }
    53.         }

    点击html与css进行文本样式以及div盒子的切换：
    image.png