网站首页>技术心得 >html怎么做选项卡(javascript选项卡代码及实例效果)

html怎么做选项卡(javascript选项卡代码及实例效果)

来源:白马号 · 发布时间:2022-12-31 12:49:13 · 所属栏目:技术心得

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


动态效果:

html选项卡动态效果


代码如下:

<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>

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

文章推荐: