js tab栏切换代码实例解析
更新时间：2019年09月03日 11:04:20 作者：smile小吴
这篇文章主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
今天机试有个内容是做网易云课堂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>
最终我的效果如下
不是很相像，但还算过得去。。。。。。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现矩形块大小任意缩放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了ES6中字符串string常用的新增方法,结合实例形式总结分析了ES6中字符串string常用的新增方法功能与使用技巧,需要的朋友可以参考下2017-11-11
这篇文章主要为大家详细介绍了JS实现页面鼠标点击出现图片特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了JS递归遍历对象获得Value值方法技巧的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧2016-07-07
这篇文章主要介绍了js实现简单的联动菜单效果,涉及javascript针对页面元素的遍历、读取及设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了JS选择排序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了微信小程序实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文将对在网页中引用js常会出现的问题进行汇总，并提出解决问题的具体方案，有助于我们更好的学习和使用js，需要的朋友一起来看下吧2016-12-12
最新评论