本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！如何用原生JS实现tab选项卡的切换效果（附代码）
收藏 说到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'; }
效果如图所示：
这种方法，有几个元素就有几个id，且每个tab都要编写function，如果要增加tab，还要增加id和function，代码冗余，不易扩展，所以此方法适合tab不多的情况下。
以上给大家分享了如何用原生JS实现tab选项卡的切换效果，步骤很详细，初学者可以自己动手尝试，看看能不能实现tab切换的效果，希望这篇文章对你有所帮助！
【相关教程推荐】
1. JavaScript中文参考手册
2. CSS3视频教程
3. bootstrap教程
