选项卡的制作

最新推荐文章于 2021-07-16 15:56:59 发布

hjy170314

最新推荐文章于 2021-07-16 15:56:59 发布

阅读量690

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： JavaScript 练习

本文链接：https://blog.youkuaiyun.com/hjy170314/article/details/84332840

前端知识专栏收录该内容

104 篇文章

订阅专栏

使用原生的js和HTML以及css写的选项卡

当点击按钮的时候调到对应的内容页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #container{
            width: 300px;
            height: 400px;
            margin: auto;
        }
        #container div{
            display: none;
        }
        #container .activity{
            display: block;
        }
    </style>
</head>
<body>
    <div id="container">
        <button class="active">A</button>
        <button>B</button>
        <button>C</button>
        <div class="show_view activity">this is page A</div>
        <div class="show_view">this is page B</div>
        <div class="show_view">this is page C</div>
    </div>
</body>
</html>
<script>
    window.onload=function(){
        //获取元素
        var oCon = document.getElementById('container');
        var oBtn = document.getElementsByTagName("button");
        var oView = oCon.getElementsByTagName("div");   //由于后面使用到ClassName，所以这里不可以使用class来获取数据
        //绑定点击事件
        for(var i=0; i<oBtn.length; i++){
            //存储下标
            oBtn[i].index = i;
            console.log(oBtn[i].index)
            //每个选项绑定点击事件
            oBtn[i].onclick = function(){
                //循环，将元素隐藏起来
                for(var j=0; j<oView.length; j++){
                    oBtn[j].className = '';
                    oView[j].className = '';
                //显示点击的元素和内容
                oBtn[this.index].className = 'active';
                oView[this.index].className='activity'
                 }
            }
        }
    }
</script>