JavaScript实现Tab栏切换功能实例解析
本文通过网易云课堂风格的Tab栏切换案例，详细解析了前端实现思路。内容涵盖HTML结构搭建、利用CSS Flexbox进行水平布局，以及通过JavaScript监听鼠标移入事件，动态切换元素的display属性与class类名，从而实现内容区的无刷新切换效果。
Tab栏切换案例概述
本次机试题目要求实现类似网易云课堂的Tab栏切换效果，具体界面如下所示。
实现思路与结构规划
首先简要说明当时的实现思路。
第一步，构建一个外层容器div，将其命名为tab。
第二步，在tab容器内部创建两个子容器，分别用于存放标题栏（class为tab_list）和内容栏（class为tab_con）。
第三步，在CSS中为标题栏菜单和内容区域应用display: flex属性，以实现标题栏与内容区的水平对齐（注：后续代码可能在规范性上有所欠缺，但能实现对齐效果）。
第四步，使用JavaScript编写鼠标移入事件处理逻辑，核心机制是通过切换元素的display属性（在none和block之间切换）来控制内容显示。
以下是当时编写的具体代码，虽然写法可能不够规范且不符合某些编码习惯，敬请谅解。
由于代码量较大，将分几个部分进行说明。
HTML结构搭建
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样式与布局
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;
}JavaScript交互逻辑
JavaScript部分负责交互逻辑。
<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>最终实现的运行效果如下所示。
虽然视觉效果与参考图并非完全一致，但整体功能基本可用。
以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33