<!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>
H5 导航栏Tab切换
最新推荐文章于 2024-07-19 15:46:26 发布