用HTML5新功能制作tab选项卡

tab选项卡

原生JavaScript很容易做一个Tab选项卡
这里主要的是用HTML5新增的标签选择器querySelector和类名操作方法(dataset、classList等)
效果如下：

body部分

<div class="tabs">
		<nav>
			<a href="javascript:;" data-cont = "primary" class="active">小学</a>
			<a href="javascript:;" data-cont = "middle">初中</a>
			<a href="javascript:;" data-cont = "hign">高中</a>
			<a href="javascript:;" data-cont = "university">大学</a>
		</nav>
		<section class="cont" id="primary">
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ol>
		</section>
		<section class="cont" id="middle">
			<ol>
				<li>a</li>
				<li>b</li>
				<li>c</li>
				<li>d</li>
				<li>e</li>
				<li>f</li>
				<li>g</li>
			</ol>
		</section>
		<section class="cont" id="hign">
			<ol>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
				<li>six</li>
				<li>seven</li>
			</ol>
		</section>
		<section class="cont" id="university">
			<ol>
				<li>①</li>
				<li>②</li>
				<li>③</li>
				<li>④</li>
				<li>⑤</li>
				<li>⑥</li>
				<li>⑦</li>
			</ol>
		</section>
	</div>
	<script>
		//需求：当用户点击某个模块的时候，给该模块添加样式，对应的内容显示出来
		//获取所有的a标签
		var navs = document.querySelectorAll("nav a");
		//先显示一部分内容（H5标签选择器默认选每一类标签的第一个）
		document.querySelector("section").style.display="block";
		//遍历该数组
		for(var i=0; i<navs.length; i++){
			navs[i].onclick = function(){
				//每次点击前都先清除原来的内容
				var beforeNav = document.querySelector(".active")
				var beforeId = beforeNav.dataset["cont"];
				document.querySelector("#"+beforeId).style.display="none";
				//排他思想
				for(var j=0; j<navs.length; j++){
					//先去除所有的active标签
					navs[j].classList.remove("active");
				}
				//对应的a加样式
				this.classList.add("active");
				//获取对应的内容标签并添加样式
				var secId = this.dataset["cont"];
				document.querySelector("#"+secId).style.display = "block";
			}
		}
	</script>

head部分

<!-- IE低版本浏览器兼容HTML5 -->
	<!--if lte ie 8>
	    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
	<![endif]-->
	<style>
	.tabs {
		width: 400`px;
		margin: 30px auto;
		border: 1px solid #eee;
		box-sizing: border-box;
	}
	.tabs nav {
		height: 40px;
		text-align: center;
		line-height: 40px;
		overflow: hidden;
		background-color: #06f;
		display: flex;
	}
	nav a{
		display: block;
		width: 100px;
		border-right: 1px solid #eee;
		color: #fff;
		text-decoration: none;
	}
	nav a:hover {
		color:#fff;
		text-decoration: none;
	}
	nav a:last-child {
		border-right: 0 none;
	}
	nav a.active {
		background: #0f6;
		color: #fff;
		text-decoration: none;
	}
	.cont {
		overflow: hidden;
		display: none;
	}
	.cont ol {
		line-height: 30px;
	}
</style>