建站
咨询
售后
建站咨询
今天机试有个内容是做网易云课堂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部分
最终我的效果如下
不是很相像，但还算过得去。。。。。。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
文章名称：jstab栏切换代码实例解析
转载源于：http://lswzjz.com/article/ipjgjo.html
