一个简单的tab栏切换

简单的tab栏切换

之前也写过tab栏切换感觉有一些复杂了，现在写一个简单的，主要是功能上的实现，样式可以再进行调整

html

    <div class="wrap">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div style="display: block;">1</div>
        <div>2</div>
        <div>3</div>
    </div>

css

        .wrap div {
            display: none;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .active {
            background-color: yellow;
        }

js

		// 切换按钮
        var btn = document.querySelectorAll('button')
        // 切换内容
        var div = document.querySelectorAll('.wrap div')
        // 遍历切换按钮
        for(let i = 0 ; i < btn.length; i++){
            btn[i].onclick = function () {
            	// 内部遍历按钮，并进行样式处理
                for(let j = 0; j <btn.length ; j++){
                	// 将当前按钮类名设置为空（此处也可写设置的类名）
                    btn[j].className = "";
                    // 将所有的切换内容进行隐藏
                    div[j].style.display = 'none'
                }
                // 将当前的按钮设置样式
                this.className = 'active';
                // 将对应索引相同的切换内容进行显示
                div[i].style.display = 'block'
            }
        }

注：此处使用原生js进行实现的一个tab栏切换，也可以用jq方法进行实现，根据自身。

实现逻辑：遍历按钮点击事件，在内部遍历隐藏所有切换内容容器，并且设置按钮为默认样式。将当前点击的按钮设置为选中样式，将对应索引的切换内容进行显示