如何用原生JS实现tab选项卡的切换效果（附代码）

来源：懂视网责编：小采时间：2020-11-27 19:29:50

如何用原生JS实现tab选项卡的切换效果（附代码）

如何用原生JS实现tab选项卡的切换效果（附代码）:说到tab选项卡，大家应该都不陌生吧，那你知道如何用原生JS实现tab选项卡的切换效果吗？这篇文章就给大家分享tab选项卡的制作方法以及js实现tab切换效果的代码，有一定的参考价值，感兴趣的朋友可以参考一下。用原生JS实现tab选项卡切换效果需要用到很多Ja

推荐度：

点击下载本文 文档为doc格式

导读如何用原生JS实现tab选项卡的切换效果（附代码）:说到tab选项卡，大家应该都不陌生吧，那你知道如何用原生JS实现tab选项卡的切换效果吗？这篇文章就给大家分享tab选项卡的制作方法以及js实现tab切换效果的代码，有一定的参考价值，感兴趣的朋友可以参考一下。用原生JS实现tab选项卡切换效果需要用到很多Ja

说到tab选项卡，大家应该都不陌生吧，那你知道如何用原生JS实现tab选项卡的切换效果吗？这篇文章就给大家分享tab选项卡的制作方法以及js实现tab切换效果的代码，有一定的参考价值，感兴趣的朋友可以参考一下。

用原生JS实现tab选项卡切换效果需要用到很多JavaScript知识，比如：function，document.getElementById（），鼠标事件等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。

实例描述：实现Tab的切换效果，我们很容易想到的是给每一个要控制的标签添加id，然后用鼠标事件，使用id获取每个元素，从而控制每个元素的样式。

HTML部分：

<div class="tab-head">
 <h2 id="tab1" onmouseover="changeTab1()" class="selected">按钮1</h2>
 <h2 id="tab2" onmouseover="changeTab2()">按钮2</h2>
 <h2 id="tab3" onmouseover="changeTab3()">按钮3</h2>
</div>
<div class="tab-content">
 <div id="c1" class="show">content1</div>
 <div id="c2">content2</div>
 <div id="c3">content3</div>
</div>

CSS部分：

*{padding: 0;margin: 0;}
 h2 { 
 width: 150px;
 height: 30px;
 margin: 0 auto;
 float: left;
 text-align: center;
 } 
 .tab-content div{
 width: 148px;
 height: 150px;
 border: 1px solid black;
 display: none;
 position: relative;
 background: pink;
 } 
 #c1{
 position: absolute;
 top: 30px;
 left: 0; 
 } 
 #c2{
 position: absolute;
 top: 30px;
 left: 150px;
 } 
 #c3{
 position: absolute;
 top: 30px;
 left: 300px;
 } 
 .selected {
 background-color: cornflowerblue;
 } 
 .tab-content .show{
 display: block;
 }

JavaScript部分：

var tab1 = document.getElementById('tab1'),
 tab2 = document.getElementById('tab2'),
 tab3 = document.getElementById('tab3'),
 c1 = document.getElementById('c1'),
 c2 = document.getElementById('c2'),
 c3 = document.getElementById('c3');
 function changeTab1() {
 tab1.className = 'selected';
 tab2.className = '';
 tab3.className = '';
 c1.className = 'show'
 c2.className = '';
 c3.className = '';
 }
 function changeTab2() {
 tab1.className = '';
 tab2.className = 'selected';
 tab3.className = '';
 c1.className = '';
 c2.className = 'show';
 c3.className = '';
 }
 function changeTab3() {
 tab1.className = '';
 tab2.className = '';
 tab3.className = 'selected';
 c1.className = ''
 c2.className = '';
 c3.className = 'show';
 }

效果如图所示：