【JavaScript】原生js中this的应用以及如何实现选项卡实例

最新推荐文章于 2022-05-11 11:59:50 发布

meichaoWen

最新推荐文章于 2022-05-11 11:59:50 发布

阅读量193

点赞数

分类专栏： JS实例文章标签： js

本文链接：https://blog.csdn.net/meichaoWen/article/details/112057450

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

用原生js实现选项卡效果。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 div {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid #999;
            display: none;
        }
        #div1 .active{background: yellow;}
    </style>
</head>

<body>
    <div id="div1">
        <input type="button" value="教育" class="active">
        <input type="button" value="留学">
        <input type="button" value="出国">
        <input type="button" value="课程">
        <div style="display: block;">1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
    <hr>
    <ol>
        <li>this: 当前发生事件的元素</li>
        <li>在js里，给元素添加自定义属性</li>
        <li>选项卡实现逻辑：先把所有 btn 的属性移除，然后给当前发生事件的元素添加样式，把所有 div 隐藏，将第 this.index 个显示</li>
    </ol>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            for(var i = 0; i < oBtn.length; i++){
                oBtn[i].index = i //给元素添加自定义属性
                oBtn[i].onclick = function(){
                    for(var i = 0; i < oBtn.length; i++){
                        oBtn[i].className = ''
                        aDiv[i].style.display = 'none'
                    }
                    this.className = 'active'
                    console.log(this.index)
                    aDiv[this.index].style.display = 'block'
                }
            }
        }
    </script>
</body>

meichaoWen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】原生js中this的应用以及如何实现选项卡实例

用原生js实现选项卡效果。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 div { width: 300px; .
复制链接

扫一扫

专栏目录