首页 > 文章 > web前端 > 如何用原生JS实现tab选项卡的切换效果（附代码）

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

yulia原创: 2018-10-18 10:14:392915浏览

说到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(&#39;tab1&#39;),
            tab2 = document.getElementById(&#39;tab2&#39;),
            tab3 = document.getElementById(&#39;tab3&#39;),
            c1 = document.getElementById(&#39;c1&#39;),
            c2 = document.getElementById(&#39;c2&#39;),
            c3 = document.getElementById(&#39;c3&#39;);
            function changeTab1() {
                tab1.className = &#39;selected&#39;;
                tab2.className = &#39;&#39;;
                tab3.className = &#39;&#39;;
                c1.className = &#39;show&#39;
                c2.className = &#39;&#39;;
                c3.className = &#39;&#39;;
            }
            function changeTab2() {
                tab1.className = &#39;&#39;;
                tab2.className = &#39;selected&#39;;
                tab3.className = &#39;&#39;;
                c1.className = &#39;&#39;;
                c2.className = &#39;show&#39;;
                c3.className = &#39;&#39;;
            }
            function changeTab3() {
                tab1.className = &#39;&#39;;
                tab2.className = &#39;&#39;;
                tab3.className = &#39;selected&#39;;
                c1.className = &#39;&#39;
                c2.className = &#39;&#39;;
                c3.className = &#39;show&#39;;
            }

效果如图所示：

这种方法，有几个元素就有几个id，且每个tab都要编写function，如果要增加tab，还要增加id和function，代码冗余，不易扩展，所以此方法适合tab不多的情况下。

以上给大家分享了如何用原生JS实现tab选项卡的切换效果，步骤很详细，初学者可以自己动手尝试，看看能不能实现tab切换的效果，希望这篇文章对你有所帮助！

以上是如何用原生JS实现tab选项卡的切换效果（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：浅谈ajax的缓存机制---IE浏览器方面下一篇：如何用jQuery实现页面返回顶部的效果（附代码）

查看更多