js选项卡

// 选项卡
sxxr()

function sxxr() {
	let clr = document.querySelectorAll("li")
	let op = document.getElementsByClassName("llrt")
	for (let i = 0; i < clr.length; i++) {
		clr[i].onclick = function() {
			for (let p = 0; p < op.length; p++) {
				clr[p].style.color = "black"
				op[p].style.display = "none"
			}
			clr[i].style.color = "blue"
			// clr[i].style.borderButtom="1px solid red"
			op[i].style.display = "block"
		}
	}
}

  • 已审核(10)

  • 待审核(0)
  • 已驳回(0)
	/* 选项卡 */
li{
	list-style: none;
}
#on{
	width: 22%;
white-space: nowrap;
	/* background-color: red; */
	justify-content: space-around;
	display: flex;
	height: 30px;
	margin-top: 9px;
	margin-left: 20px;
}
hr{
	margin-top: -1px;
}
.llrt{
	
	width: 100%;
	margin: auto;
	display: none;
	/* text-align: center; */
	background-color: white;
	padding-bottom: 20px;
}

你可能感兴趣的:(javascript,前端,html)