html js切换tab,js tab栏切换代码实例解析

今天机试有个内容是做网易云课堂tab栏切换的，如下

先简单说下我当时的想法

1.先弄一个大div盒子，我命名为tab

2.在大盒子tab里面有两个小盒子，分别是标题栏(tab_list)和内容栏(tab_con)

3.采用display：flex；使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范，但实现对齐效果)

4.js编写鼠标移入事件，主要是利用display：none和display：block之间的切换。

下面放下我当时写的代码吧，可能写得不是很正规，不符合习惯，请大家见谅

由于代码太多分几部分说

HTML部分——大致布局，标题栏和内容栏

• 今日 20:00开抢
• 明天 10:00开抢
• 明天 14：00开抢
• 明天 20:00开抢
• 后天 10:00
• 后天 14:00

部分内容区item区域的HTML代码，基本差不多

javascript课程

妙学堂

￥49.9

￥1600

即将开抢

javascript课程

妙学堂

￥49.9

￥1600

即将开抢

javascript课程

妙学堂

￥49.9

￥1600

即将开抢

javascript课程

妙学堂

￥49.9

￥1600

即将开抢

javascript课程

妙学堂

￥49.9

￥1600

即将开抢

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部分

var tab_list=document.querySelector('.tab_list');

var lis=tab_list.querySelectorAll('li');

var items=document.querySelectorAll('.item');

for(var i=0;i

lis[i].setAttribute('index',i);

lis[i].οnmοuseοver=function(){

for(var i=0;i

lis[i].className='';

}

this.className='active';

var index=this.getAttribute('index');

console.log(index);

for(var i=0;i

items[i].style.display='none';

}

items[index].style.display='block';

}

}

最终我的效果如下

不是很相像，但还算过得去。。。。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。