今天機試有個內容是做網易云課堂tab欄切換的，如下
先簡單說下我當時的想法
1.先弄一個大div盒子，我命名為tab
2.在大盒子tab里面有兩個小盒子，分別是標題欄（tab_list）和內容欄（tab_con）
3.采用display：flex；使標題欄菜單和內容欄的內容水平對齊（可能待會放的代碼不是很規范，但實現對齊效果）
4.js編寫鼠標移入事件，主要是利用display：none和display：block之間的切換。
下面放下我當時寫的代碼吧，可能寫得不是很正規，不符合習慣，請大家見諒
由于代碼太多分幾部分說
HTML部分――大致布局，標題欄和內容欄
<div class="tab"> <div class="tab_list"> <ul> <li class="active" >今日 20:00開搶</li> <li>明天 10:00開搶</li> <li>明天 14：00開搶</li> <li>明天 20:00開搶</li> <li>后天 10:00</li> <li>后天 14:00</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> </div>
部分內容區item區域的HTML代碼，基本差不多
<div class="item" style="display: block"> <div class="box"> <div class="product"> <a><img src="img/pic1.png"/></a> <div class="price" > <h3>javascript課程</h3> <h5>妙學堂</h5> <p> <span style="color: red;font-size: 16px;">￥49.9</span> <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span> <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span> </p> </div> </div> <div class="product"> <a><img src="img/pic1.png"/></a> <div class="price" > <h3>javascript課程</h3> <h5>妙學堂</h5> <p> <span style="color: red;font-size: 16px;">￥49.9</span> <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span> <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span> </p> </div> </div> <div class="product"> <a><img src="img/pic1.png"/></a> <div class="price" > <h3>javascript課程</h3> <h5>妙學堂</h5> <p> <span style="color: red;font-size: 16px;">￥49.9</span> <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span> <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span> </p> </div> </div> <div class="product"> <a><img src="img/pic1.png"/></a> <div class="price" > <h3>javascript課程</h3> <h5>妙學堂</h5> <p> <span style="color: red;font-size: 16px;">￥49.9</span> <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span> <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span> </p> </div> </div> <div class="product"> <a><img src="img/pic1.png"/></a> <div class="price" > <h3>javascript課程</h3> <h5>妙學堂</h5> <p> <span style="color: red;font-size: 16px;">￥49.9</span> <span style="text-decoration:line-through ;font-size: 10px;">￥1600</span> <span style="border: 3px gainsboro dashed;margin-left: 55px;font-size: 16px;">即將開搶</span> </p> </div> </div> </div> </div>
CSS部分
.tab{ width: 100%; height: 300px; text-align: center; margin: 10px auto; background-color: ghostwhite; } .tab_list ul{ display: flex; height: 50px; margin: 0 auto; padding: 0; } .tab li{ list-style: none; height: 50px; line-height: 50px; flex:auto; } .tab_list .active{ background-color: red; color: #ffffff; } .tab_con{ margin: 10px auto; width: 100%; height: 200px; } .item{ display: none; } .box{ display: flex; } .product{ flex: auto; } .product img{ width: 220px; height: 120px; } .price{ position: relative; width: 220px; height: 80px; } .price p{ margin: 0px; left: 0px; position: absolute; }JS部分
<script> var tab_list=document.querySelector('.tab_list'); var lis=tab_list.querySelectorAll('li'); var items=document.querySelectorAll('.item'); for(var i=0;i<lis.length;i++){ lis[i].setAttribute('index',i); lis[i].onmouseover=function(){ for(var i=0;i<lis.length;i++){ lis[i].className=''; } this.className='active'; var index=this.getAttribute('index'); console.log(index); for(var i=0;i<items.length;i++){ items[i].style.display='none'; } items[index].style.display='block'; } } </script>最終我的效果如下
不是很相像，但還算過得去。。。。。。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
