js选项卡列切换代码示例分析

今天机考有一个内容是切换网易云课堂的标签栏，如下

让我简单说一下我当时的想法

1.首先得到一个大的div框，我把它命名为tab

2.大框选项卡中有两个小框，即标题栏(选项卡列表)和内容栏(选项卡图标)

3.使用显示：flex；水平对齐标题栏菜单和内容栏的内容(要播放的代码可能不是很标准，但达到了对齐效果)

4.js编写鼠标进入事件，主要使用display:none和display:block之间的切换。

让我们放下我当时写的代码。可能不是很正式，不符合习惯。请原谅我

因为代码太多了，不能分成几部分来说，

HTML部分——的总布局、标题栏和内容栏

Div class=' tab ' Div class=' tab _ list ' ul Li class=' active '今天，20:00/li明天，10:00/li明天，14: 00/li明天，20:00/li后天，103:00/Li后天143:00/Li/ul/Div class=' tab _ con ' Div class=' item '

div class=' item ' style=' display : block ' div class=' box ' div class=' product ' aimg src=' http : img/pic1。png/a div class=' price ' H3 JavaScript课程/h3 h5妙学堂/H5 p span style=' color : red；'font-size : 16px49.9/span span style=' text-decoration : line-through；' font-size : 10px'1600/span span style=' border : 3px gainsboro虚线；左边距left : 55px ' font-size : 16px；'即将开抢/span/p/div/div class=' product ' aimg src=' http : 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 : 10px1600/span span style=' border : 3px gainsboro虚线；左边距left : 55px ' font-size : 16px；'即将开抢/span/p/div/div class=' product ' aimg src=' http : img/pic1。png/a div class=' price ' H3 JavaScript课程/h3 h5妙学堂/H5 p span style=' color : red；'font-size : 16px49.9/span span style=' text-decoration : line-through；' font-size : 10px'1600/span span style=' border : 3px gainsboro虚线；左边距left : 55px ' font-size : 16px；'即将开抢/span/p/div/div class=' product ' aimg src=' http : 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 : 10px1600/span span style=' border : 3px gainsboro虚线；左边距left : 55px ' font-size : 16px；'即将开抢/span/p/div/div class=' product ' aimg src=' http : img/pic1。png/a div class=' price ' H3 JavaScript课程/h3 h5妙学堂/H5 p span style=' color : red；'font-size : 16px49.9/span span style=' text-decoration : line-through；' font-size : 10px'1600/span span style=' border : 3px gainsboro虚线；左边距left : 55px ' font-size : 16px；'即将开抢/span /p /div /div /div /divCSS部分。制表符{宽度： 100%；高度： 300像素文本对齐：中心；余量： 10px自动；背景-颜色：幽灵白色；} .tab _ list ul { display: flex高度： 50pxmargin: 0自动添加： 0；} .选项卡li{列表样式：无；高度： 50px线高： 50pxflex:auto}。选项卡列表.活动{背景-颜色：红色；color: # ffffff}。tab _ con { margin: 10px auto宽度： 100%;高度： 200像素；} .项目{显示：无；} .box { display: flex}。产品{ flex: auto}。产品img { width: 220px高度： 120像素；} .价格{位置：相对；宽度： 220 px高度： 80px} .价格p { margin: 0pxleft: 0px绝对位置：}JS部分

脚本var tab _ list=文档。queryselector(' .tab _ list’)；var lis=tab _ list。查询selector all(' Li ')；var items=文档。queryselectorall(' .项目');for(var I=0；长度；i ){ lis[i].setAttribute('index '，I)；lis[i].onmouseover=function(){ for(var I=0；长度；i ){ lis[i].class NAmE=} this . class NAmE=' active var index=this。GetAttribute(' index ')；console.log(索引);for(var I=0；iitems.lengthI){ items[I]。风格。显示='无'；}个项目[索引]。风格。display=' block} }/脚本最终我的效果如下

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

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