JS-----选项卡切换

阿尭

已于 2022-08-27 16:04:12 修改

阅读量3.6k

点赞数 5

分类专栏：操作元素类型操作Css样式 tab选项卡文章标签： java servlet html

于 2022-08-27 16:01:12 首次发布

本文链接：https://blog.csdn.net/qq_63322025/article/details/126558834

版权

操作元素类型同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

操作Css样式

2 篇文章 0 订阅

订阅专栏

tab选项卡

1 篇文章 0 订阅

订阅专栏

用js实现以上操作，以目前学习的知识，有两种做法，分别是绑定事件和事件分离。这里比较推荐的写法是事件分享写法。

要写这样一个页面先写html和css将布局做好。这是小编的代码~

    <style>
        .container {
            height: 100px;
            display: flex;
            flex-wrap: wrap;
        }

        .container>div {
            width: 400px;
            height: 100px;
            background-color: skyblue;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            border: 5px solid pink;

        }

        #main {
            height: 400px;
            background: paleturquoise;
            font-size: 100px;
            width: 1230px;
            text-align: center;

        }

        .container>div:hover {
            cursor: pointer;
        }

        .container .active {
            background: darkorange;
        }
    </style>

</head>

<body>
    <div class="container">
        <div id="one">选项1</div>
        <div id="two">选项2</div>
        <div id="three">选项3</div>
    </div>
    <div id="main">1</div>

那接下来重点分分享一下js的实现

1.首先要明确我们选中的元素，如何现在选项卡进行切换。

2.对于选中的选项卡我们要清除他的active

3.在给点击的选项卡加上active样式

完成这三点，基本你可以初步现实他的样式，但是为了代码的健壮性。我们应该考虑的更加全面一些。比如在加一个选项卡4，我们如何现实点击他会有响应，此时我们应该想到有For循环去遍历他。

先分享一下绑定事件的写法~

 <script>
        var divEle = document.querySelectorAll('.container>div')//选中container下的所有Div
        function onTab(index) {
            for (let i = 0; i < divEle.length; i++) {  //遍历所有Div
                divEle[i].className = ''   //清除所有的active样式
            }
            divEle[index].className = 'active'
            console.log(index)

            if (index == 0) {
                var divmain = document.querySelector('#main')
                divmain.style.fontSize = '200px'
                divmain.style.backgroundColor = 'yellow'
            }
            else if (index == 1) {
                var divmain = document.querySelector('#main')
                divmain.style.fontSize = '200px'
                divmain.style.backgroundColor = 'green'
            }
            else {
                var divmain = document.querySelector('#main')
                divmain.style.fontSize = '200px'
                divmain.style.backgroundColor = 'pink'
            }



        }

这样写js可以实现界面响应，但是代码不够完善。

将事件分离写法，双重for循环遍历，再用if判断当前获取的值，使代码具有健壮性！

 <script>
        var divEle = document.querySelectorAll('.container>div')

        var divMain = document.querySelector('#main')

        for (let j = 0; j < divEle.length; j++) {
            divEle[j].onclick = function () {
                for (var i = 0; i < divEle.length; i++) {
                    divEle[i].className = ''
                }
                this.className = 'active'
                if (j == 0) {
                    divMain.style.fontSize = '100px'
                    divMain.style.backgroundColor = 'yellow'
                    
                    var newDiv = document.querySelector('#one') //获取id名为one的div
                    divMain.innerText = newDiv.innerText         //获取到选1  
                }
                else if (j == 1) {
                    divMain.style.fontSize = '100px'
                    divMain.style.backgroundColor = 'gray'
                    var newDiv = document.querySelector('#two') //获取id名为one的div
                    divMain.innerText = newDiv.innerText

                }
                else {
                    divMain.style.fontSize = '100px'
                    divMain.style.backgroundColor = 'green'
                    var newDiv = document.querySelector('#three') //获取id名为one的div
                    divMain.innerText = newDiv.innerText

                }
            }
        }
    </script>

不过可以不给div赋予id值，直接使用nth-child一样可以成功哦，小编是小白，若有错误望留言指正！