简易tab切换

let tab = function (bar, pane) {
			if (typeof (bar) !== "string" || typeof (pane) !== "string") {
				console.log('请传入字符串类型')
			} else {
				this.bar = bar
				this.pane = pane
				let lis = document.getElementsByClassName(this.bar) //获取tab标签
				let tabs = document.getElementsByClassName(this.pane) //tab容器
				//第一个元素默认显示

				for (var k = 0; k < tabs.length; k++) {
					tabs[k].style.display = "none";
				}
				tabs[0].style.display = "block"
				for (var i = 0; i < lis.length; i++) {
					lis[i].index = i;
					lis[i].onclick = function () {
						console.log(this)
						for (var j = 0; j < lis.length; j++) {
							lis[j].classList.remove("active");
						}
						this.classList.add("active");
						for (var k = 0; k < tabs.length; k++) {
							tabs[k].style.display = "none";
						}
						tabs[this.index].style.display = "block";
					}
				}
			}
		}
		//tab调用
		tab("tabtop", "tab-pane")

你可能感兴趣的:(简易tab切换)