js原生Tab栏切换

坤坤多吃点儿。

已于 2022-08-01 18:02:33 修改

阅读量1.2k

点赞数 3

分类专栏： Javascript

于 2022-08-01 18:00:16 首次发布

本文链接：https://blog.csdn.net/m0_51614469/article/details/126106295

版权

JavaScript 选项卡切换效果 DOM操作事件处理

关键词由CSDN通过智能技术生成

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

tab栏切换

需求：点击选项卡，当前选项卡高亮显示，当前选项卡相关内容显示，其余选项卡（排他思想）默认样式且不显示内容。如下图：
步骤：

1）获取所有选项卡元素及选项卡内容元素。
2）遍历所有选项卡，设置自定义属性data-index用于获取当前被点击选项卡索引，绑定点击事件。
3）再次遍历选项卡，将全部选项卡样式设置为默认，并把当前被点击选项卡设置高亮样式（这里是把边框颜色高亮）。同时遍历选项卡内容，将全部选项卡内容隐藏。
4）获取被点击选项卡index(即索引),显示被点击选项卡所匹配内容。

在这里插入图片描述

html

		<ul class="uls">
	        <li class="tab-t" style="border-color: orangered">选项卡一</li> 	<!-- 默认第一个选项卡高亮 -->
	        <li class="tab-t">选项卡二</li>
	        <li class="tab-t">选项卡三</li>
	        <li class="tab-t">选项卡四</li>
	        <li class="tab-t">选项卡五</li>
	    </ul>
	    <ul class="models">
	        <li class="model-item" style="display: block">模块一</li> <!-- 默认第一个选项卡内容显示 -->
	        <li class="model-item">模块二</li>
	        <li class="model-item">模块三</li>
	        <li class="model-item">模块四</li>
	        <li class="model-item">模块五</li>
	    </ul>

css

		ul{
            list-style:none;
            margin: 0;
            padding: 0;
        }
        .uls{
            width: 500px;
            margin: 100px auto 0;
            list-style: none;
            display: flex;
        }
        .uls>li{
            width: 100px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
            border-bottom: 2px solid transparent;
            cursor: pointer; /* 鼠标指针改成小手 */
        }
        .model-item{
            width: 500px;
            line-height: 300px;
            background: #eee;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            margin: 0 auto;
            display:none;
        }

js

		// 获取元素
		var lis = document.querySelectorAll('.tab-t');
        var models = document.querySelectorAll('.model-item');

		// 遍历所有选项卡
        for (var i = 0,len = lis.length;i < len;i ++){
        	// 设置当前元素的index索引值
            lis[i].setAttribute('data-index',i);
            // 绑定点击事件
            lis[i].onclick = function(){
            	// 将所有选项卡边框设置透明
                for(var j = 0,len = lis.length;j < len;j ++){
                    lis[j].style.borderColor = 'transparent';
                }
                // 将所有选项卡内容设置隐藏
                for(var j = 0,len = models.length;j < len;j ++){
                    models[j].style.display = 'none';
                }
                // 设置当前被点击选项卡边框色
                this.style.borderColor = 'orangered';
                // 获取被点击选项卡索引
                var index = this.getAttribute('data-index');
                // 显示被点击选项卡所匹配内容
                models[index].style.display = 'block';
            }
        }