前端入坑紀(jì) 16
得空如此竭鞍，不更怎行！
最近屬于項(xiàng)目空檔期，所以時(shí)常更新领追，必然多多益善！
立馬就要mother’s day了些膨，依舊提前預(yù)祝天下的媽媽們，母親節(jié)快樂钦铺！
今天忽然想起了當(dāng)初剛剛進(jìn)公司時(shí)的面對(duì)的一個(gè)項(xiàng)目（如題）《┪恚現(xiàn)在回憶起來洼哎，依舊是“刻苦銘心”啊噩峦！
這真沒有打錯(cuò)字凭涂，刻苦極了乍炉。當(dāng)時(shí)岛琼，對(duì)js的循環(huán)什么的都理解不深底循，就是一愣頭青！
所以有多少個(gè)div就寫了多少個(gè)循環(huán)，可想而知是多么的“刻苦銘心”了祠挫！
今天借著空閑那槽，把這個(gè)回憶要抹殺掉，重新寫一個(gè)等舔，雖然依舊不是很完美骚灸，但是起碼比以前是好多了！
OK慌植，first things first甚牲！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
這次重復(fù)的Div內(nèi)容太多，貼出來太恐怖了蝶柿，折疊截個(gè)圖丈钙。詳細(xì)的進(jìn)項(xiàng)目里看吧！布局基本就是用float左右交汤，來完成的雏赦。注意點(diǎn)應(yīng)該就是第一個(gè)內(nèi)容的div要設(shè)置display：block。不然鼠標(biāo)滑入芙扎，第一次看到會(huì)是空的內(nèi)容喉誊。
CSS 結(jié)構(gòu)
* {
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 的布局，真要說注意的地方纵顾，應(yīng)該就是伍茄，float完，注意要清空浮動(dòng)施逾。名為 “.clear” 的class就是這么用的敷矫！
JS 結(jié)構(gòu)
// 獲取leftNav里的a， 給他們添加對(duì)應(yīng)的數(shù)字汉额， 以便后面選取對(duì)應(yīng)的ritDiv設(shè)置為顯示曹仗，其它則隱藏。
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";
}
}
// 給每個(gè)右側(cè)的導(dǎo)航ritNav里的的每個(gè)a添加對(duì)應(yīng)的idx數(shù)字蠕搜。
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)
}
}
// 當(dāng)鼠標(biāo)滑入當(dāng)前的ritNav里的某個(gè)a時(shí)怎茫，選取這個(gè)ritNav同級(jí)的ritCont里的對(duì)應(yīng)順序的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轨蛤，是之前特地設(shè)置過的
var aIdx = this.getAttribute("idx");
// 先隱藏全部，再顯示對(duì)應(yīng)idx的那個(gè)div
for (var b = 0; b < targetDivs.length; b++) {
targetDivs[b].style.display = "none";
}
targetDivs[aIdx].style.display = "block";
}
}
}
這個(gè)效果真心難在循環(huán)里虫埂，有時(shí)候會(huì)把自己繞暈祥山！所以大概的意思注解了下，太詳細(xì)的怕把讀者繞暈掉伏，也怕自己描述不清缝呕。有興趣的話澳窑，大家可以多多嘗試，慢慢應(yīng)該就會(huì)懂了供常。我也是這么過來的......
