划过变换内容，高级Tab栏

HTML部分：

 <div class="box" id="box">
        <ul id="leftBox">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
        <div id="rightBox">
            <div id="rightBox1" class="active">
                <a href="#">a1</a>
                <ul class="tabUl">
                    <li class="hover">a1</li>
                    <li>a2</li>
                    <li>a3</li>
                    <li>a4</li>
                </ul>
            </div>
            <div id="rightBox2">
                <a href="#">b1</a>
                <ul class="tabUl">
                    <li class="hover">b1</li>
                    <li>b2</li>
                    <li>b3</li>
                    <li>b4</li>
                </ul>
            </div>
            <div id="rightBox3">
                <a href="#">c1</a>
                <ul class="tabUl">
                    <li class="hover">c1</li>
                    <li>c2</li>
                    <li>c3</li>
                    <li>c4</li>
                    <li>c5</li>
                    <li>c6</li>
                </ul>
            </div>
            <div id="rightBox4">
                <a href="#">d1</a>
                <ul class="tabUl">
                    <li class="hover">d1</li>
                    <li>d2</li>
                    <li>d3</li>
                    <li>d4</li>
                </ul>
            </div>
        </div>
    </div>

CSS部分： 

  * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }
        
        .box {
            width: 800px;
            border: 1px solid #000000;
            margin: 20px auto;
            background: blue;
        }
        
        .box:after {
            content: "";
            display: block;
            clear: both;
        }
        
        #leftBox {
            float: left
        }
        
        #rightBox {
            float: left;
        }
        
        #leftBox li {
            width: 200px;
            height: 89px;
            background: red;
            margin-bottom: 2px;
            color: #fff;
            font: 50px/89px "黑体";
            text-align: center;
        }
        
        #rightBox div {
            display: none;
        }
        
        #rightBox .active {
            display: block;
        }
        
        #rightBox a {
            display: block;
            width: 600px;
            height: 325px;
            background: #0F0;
            font-size: 100px;
            color: #000;
            text-align: center;
            text-decoration: none;
            line-height: 360px;
        }
        
        .tabUl {
            display: table;
            width: 100%;
        }
        
        .tabUl li {
            display: table-cell;
            background: #909;
            color: #fff;
            font-size: 20px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-right: 2px solid #03C;
            cursor: pointer;
        }
        
        .tabUl li.hover {
            background: #fff;
            color: #000;
        }
        
        #leftBox .active {
            background: yellow;
            color: #000;
        }

JS部分：

<script>
        let lis = document.querySelectorAll("#leftBox li");
        let divs = document.querySelectorAll("#rightBox div");
        for (let i = 0; i < divs.length; i++) {
            lis[i].onmouseover = function() {
                for (let j = 0; j < divs.length; j++) {
                    lis[j].className = "";
                    divs[j].className = "";
                }
                lis[i].className = "active";
                divs[i].className = "active";
                let ds = document.querySelectorAll(".active li");
                let a = document.querySelector(".active a");
                console.log(ds);
                for (let k = 0; k < ds.length; k++) {
                    ds[k].onmouseover = function() {
                        for (let j = 0; j < ds.length; j++) {
                            ds[j].className = "";
                            console.log(j);
                        }
                        ds[k].className = "hover";
                        a.innerHTML = ds[k].innerHTML;
                    }
                }
            }
        }
    </script>