html怎么做选项卡？相信新手们或者小白们会问这样的问题，今天白马号给大家做了一个javascript选项卡实例及代码列出，下面我们一起看看吧。

动态效果：

代码如下：

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab1</button>
    <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab2</button>
    <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab3</button>
</div>
<div id="Tab1" class="tabcontent">
    <p>Content of Tab1.</p>
</div>
<div id="Tab2" class="tabcontent">
    <p>Content of Tab2.</p>
</div>
<div id="Tab3" class="tabcontent">
    <p>Content of Tab3.</p>
</div>
<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

 以上就是本篇文章的全部内容了，需要制作选项卡的话，可以直接复制上面的代码即可。如果想美观一样的话，可以自行修改下即可。

文章推荐：