H5 导航栏Tab切换



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.tabs{
				width: 400px;
				text-align: center;
				margin: 30px auto;
				border: 1px solid #C0DCC0;
				background-color: #FFF;
				box-sizing: border-box;
			}
			.tabs nav{
				height: 40px;
				text-align: center;
				line-height: 40px;
				overflow: hidden;
				background-color: #C0DCC0;
				display: block;
				
			}
			nav{
				font-size: 20px;
				margin: 30x auto;
			}
			nav a{
				text-decoration: none;		
			}
		
			nav a.active{
				background-color: #FFC0CB;
			}
			.cont{
				overflow: hidden;
				display: none;
			}
			.cont ul{
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="tabs">
			<nav>
				<a href="javascript:;" data-cont="local">国内新闻</a>
				<a href="javascript:;" data-cont="global">国际新闻</a>
				<a href="javascript:;" data-cont="sports">体育新闻</a>
				<a href="javascript:;" data-cont="funny">娱乐新闻</a>
			</nav>
			
			<section class="cont" id="local">
				<ul>
					<li>国内新闻</li>
					<li>国内新闻</li>
				</ul>
			</section>
			<section class="cont" id="global">
				<ul>
					<li>国际新闻</li>
					<li>国际新闻</li>
				</ul>
			</section>
			<section class="cont" id="sports">
				<ul>
					<li>体育新闻fvvffcvvfc</li>
					<li>体育新闻fvfgdcfvgfvcg</li>
				</ul>
			</section>
			<section class="cont" id=funny>
				<ul>
					<li>娱乐新闻</li>
					<li>娱乐新闻</li>
				</ul>
			</section>
		</div>
		
		<script>
			//默认显示一个当前的样式，点击导航实现切换
			function tabs(key){
				var navs=document.querySelectorAll('nav a');
				//遍历给导航绑定样式，并且添加样式
				for(var i=0;i<navs.length;i++){
					if(key==i){
						navs[i].classList.add('active');
						//拿到Id
						var secId=navs[i].dataset['cont'];
						//获取对应标签
						document.querySelector('#'+secId).style.display='block';
					}
					//绑定点击事件
					navs[i].function(){
						var currentNav=document.querySelector('.active');
						var currentId=currentNav.dataset['cont'];
						currentNav.classList.remove('active');
						document.querySelector('#'+currentId).style.display='none';
						
						this.classList.add('active');
						var myId=this.dataset['cont'];
						document.querySelector('#'+myId).style.display='block';
						
					}
				}
			}
			tabs(2);
		</script>
	</body>
</html>
猜你喜欢
