js tab栏切换代码实例解析
2019-09-03 11:04
1451 查看
今天机试有个内容是做网易云课堂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>
最终我的效果如下
不是很相像,但还算过得去。。。。。。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Java之Spring注解配置bean实例代码解析
- (实模式+保护模式)模式切换的过程步骤(代码+文字解析)
- python 解析XML python模块xml.dom解析xml实例代码
- python 解析html基础 HTMLParser库,方法,及代码实例
- asp.net各种cookie代码和解析实例
- JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
- Hibernate缓存机制实例代码解析
- linux IPC之socket解析及实例代码
- 实例解析JAVA中代码的加载顺序
- Eclipse创建Hibernate入门实例代码详细解析
- BootStrap中Tab页签切换实例代码
- Android 滑动拦截实例代码解析
- Java生成和解析XML格式文件和字符串的实例代码
- (实模式+保护模式)模式切换的过程步骤(代码+文字解析)
- 图像仿射变换详解【含实例和代码解析】
- jQuery实现回车键(Enter)切换文本框焦点的代码实例
- hadoop MapReduce实例解析,hadoop新旧两种代码风格1.0.x和1.2.x
- 模糊控制算法实例解析(含代码)
- Java中io流解析及代码实例
- Delphi实现图片滚动切换的完整实例代码