前端入坑紀 16

得空如此，不更怎行！
最近屬于項目空檔期，所以時常更新，必然多多益善！
立馬就要mother’s day了，依舊提前預祝天下的媽媽們，母親節快樂！

今天忽然想起了當初剛剛進公司時的面對的一個項目（如題）。現在回憶起來，依舊是“刻苦銘心”啊！
這真沒有打錯字，刻苦極了。當時，對js的循環什么的都理解不深，就是一愣頭青！
所以有多少個div就寫了多少個循環，可想而知是多么的“刻苦銘心”了！

今天借著空閑，把這個回憶要抹殺掉，重新寫一個，雖然依舊不是很完美，但是起碼比以前是好多了！

素素的分級導航

OK，first things first！項目鏈接

HTML 結構

HTML 結構

這次重復的Div內容太多，貼出來太恐怖了，折疊截個圖。詳細的進項目里看吧！布局基本就是用float左右，來完成的。注意點應該就是第一個內容的div要設置display：block。不然鼠標滑入，第一次看到會是空的內容。

CSS 結構

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        html,
        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
            height: 100%;
            background: #fefefe;
            text-align: center;
        }
        
        body {
            border-top: 1px solid #fefefe;
            box-sizing: border-box
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none
        }
        
        .mWrp {
            width: 90%;
            min-width: 650px;
            margin: 10% auto;
            border: 1px solid #ccc;
            border-radius: 3px;
            position: relative;
        }
        
        .leftNav {
            float: left;
            width: 80px;
            line-height: 36px;
        }
        
        .leftNav li {
            margin: 6px;
        }
        
        .leftNav li a {
            display: block;
            color: #fff;
            background-color: skyblue;
            transition: all 260ms ease;
            border-radius: 3px;
            font-size: 13px;
        }
        
        .leftNav li a:hover {
            color: #333;
            background-color: lightblue;
        }
        
        .ritDiv {
            display: none;
            width: calc(100% - 80px);
            float: right;
        }
        
        .ritDiv nav a {
            float: left;
            display: block;
            width: 15%;
            margin: 0 0.833%;
            line-height: 36px;
            text-align: center;
            position: relative;
        }
        
        .ritDiv nav a:hover {
            color: skyblue
        }
        
        .ritDiv nav a::after {
            content: "";
            display: block;
            top: 8px;
            right: 0px;
            height: 20px;
            background: #ddd;
            width: 1px;
            position: absolute;
        }
        
        .ritDiv nav a:last-child::after {
            display: none
        }
        
        .ritCont {
            border: 1px solid lightblue;
            margin: 10px;
            border-radius: 2px;
        }
        
        .ritCont div {
            display: none;
        }
        
        .ritCont img {
            width: 40%;
            float: left;
            margin: 3% 5%;
            box-shadow: 1px 1px 6px #666;
        }
        
        .ritCont p {
            float: left;
            text-align: left;
            text-indent: 2rem;
            width: 45%;
            line-height: 160%;
            margin-top: 3%;
            margin-right: 5%;
        }

float 的布局，真要說注意的地方，應該就是，float完，注意要清空浮動。名為 “.clear” 的class就是這么用的！

JS 結構

        // 獲取leftNav里的a， 給他們添加對應的數字， 以便后面選取對應的ritDiv設置為顯示，其它則隱藏。
        var leftNavas = document.getElementsByClassName("leftNav")[0].getElementsByTagName("a");
        for (var e = 0; e < leftNavas.length; e++) {
            leftNavas[e].setAttribute("idx", e);
            leftNavas[e].onmouseenter = function() {
                var nowIdx = this.getAttribute("idx");
                var ritDiv = document.getElementsByClassName("ritDiv");
                for (var i = 0; i < ritDiv.length; i++) {
                    ritDiv[i].style.display = "none";
                }
                ritDiv[nowIdx].style.display = "block";
            }
        }

        // 給每個右側的導航ritNav里的的每個a添加對應的idx數字。
        var ritNav = document.getElementsByClassName("ritDiv");
        for (var i = 0; i < ritNav.length; i++) {
            var ritNavas = ritNav[i].getElementsByTagName("a");
            for (var j = 0; j < ritNavas.length; j++) {
                ritNavas[j].setAttribute("idx", j)
            }
        }

        // 當鼠標滑入當前的ritNav里的某個a時，選取這個ritNav同級的ritCont里的對應順序的div，讓它顯示，其它隱藏
        for (var s = 0; s < ritNav.length; s++) {
            var ritNavas = ritNav[s].getElementsByTagName("a");
            for (var l = 0; l < ritNavas.length; l++) {
                ritNavas[l].onmouseenter = function() {
                    var targetDivs = this.parentNode.parentNode.getElementsByClassName("ritCont")[0].getElementsByTagName("div");
                    // 這里用到的idx，是之前特地設置過的
                    var aIdx = this.getAttribute("idx");
                    // 先隱藏全部，再顯示對應idx的那個div
                    for (var b = 0; b < targetDivs.length; b++) {
                        targetDivs[b].style.display = "none";
                    }
                    targetDivs[aIdx].style.display = "block";
                }
            }
        }

這個效果真心難在循環里，有時候會把自己繞暈！所以大概的意思注解了下，太詳細的怕把讀者繞暈，也怕自己描述不清。有興趣的話，大家可以多多嘗試，慢慢應該就會懂了。我也是這么過來的......