JS实现tab切换

html部分：
	<div class="dh-tab-box">
			<ul class="tab-title-box clearfix">
				<li class="tab-title checked">标题1</li>
				<li class="tab-title">标题2</li>
				<li class="tab-title">标题3</li>
			</ul>
			<ul>
				<li class="tab-con active">内容1</li>
				<li class="tab-con">内容2</li>
				<li class="tab-con">内容3</li>
			</ul>
		</div>

css部分：
	*{
		margin:0;
		padding:0;
		list-style: none;
	}
	.clearfix{
		content: "";
		display: table;
		clear: both;
	}
	.tab-title{
		float: left;
		padding: 10px 20px;
		cursor: pointer;
	}
	.tab-title.checked{
		background: red;
	}
	.tab-con{
		display: none;
		width: 200px;
		height: 200px;
		background: navajowhite;
	}
	.tab-con.active{
		display: block;
	}

JS部分：
	let tabTitle = document.getElementsByClassName('tab-title')
	let tabCon = document.getElementsByClassName('tab-con')
	for (var i = 0; i < tabTitle.length; i++) {
		tabTitle[i].idx = i//自定义属性
		console.log(tabTitle[i].idx)
		tabTitle[i].onclick = function () {
			for (var j = 0; j<tabCon.length; j++) {
				tabCon[j].classList.remove('active')
				tabTitle[j].classList.remove('checked')
			}
			tabCon[this.idx].classList.add('active')
			tabTitle[this.idx].classList.add('checked')
		}
	}