简单的选项卡制作（原生JS）

Posted 2021-02-02 OH-MY-GOD

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的选项卡制作（原生JS）相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        color: white;
        display: none;
    }
</style>
</head>

<body>
<a href="javascript:btn(1)">视频</a>
<a href="javascript:btn(2)">音乐</a>
<a href="javascript:btn(3)">图片</a>
<div>视频</div>
<div>音乐</div>
<div>图片</div>
</body>
</html>
<script>
    var odiv = document.getElementsByTagName("div");
    function btn(index){
        for(var i = 0 ;i<odiv.length;i++){
            odiv[i].style.display = "none";
        }
        odiv[index-1].style.display = "block";
    }

</script>

以上是关于简单的选项卡制作（原生JS）的主要内容，如果未能解决你的问题，请参考以下文章