简单的选项卡制作(原生JS)

Posted 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)的主要内容,如果未能解决你的问题,请参考以下文章

开发中经常用到的特效效果

开发中经常用到的特效效果

原生js选项卡

原生js代码水平导航栏效果

原生JS制作简单的漂浮广告

在选项卡布局中使用两窗格片段