通过JavaScript、css、H5 实现简单的tab栏的切换和复用
一、效果展示二、实现的大致原理
1.我们先通过css 和h5布局得到最基本的tab栏样式（有代码参考）
2.在获得样式，给我们所需要点击的目标设置监听事件，在获取节点，设置一个自定义的节点属性index,通过它在获取点击出现样式的节点，在经过寻找元素，设置全取消，点击相应的节点出现的效果。这里获取节点方式，都是通过点击元素获取父元素，在获得子元素，同级获得兄弟元素，在获取兄弟元素的子元素（笼统的解释，细节部分看代码段的解释）
三、H5的布局
没有特殊的地方，都是基本的写法，只要给定一定的选择器就可以了
<div class="tab">
<div class="nav">
<a href="javascript:;" class="hover">公司新闻</a>
<a href="javascript:;">公司动态</a>
<a href="javascript:;">行业新闻</a>
</div>
<div class="nav_con">
<div>内容</div>
<div>动态</div>
<div>行业</div>
</div>
</div>
<div class="tab">
<div class="nav">
<a href="javascript:;" class="hover">大学</a>
<a href="javascript:;">中学</a>
<a href="javascript:;">小学</a>
</div>
<div class="nav_con">
<div>大学内容</div>
<div>中学内容</div>
<div>小学内容</div>
</div>
</div>
四、CSS样式
为了得到视屏中的样式，需要设置最基本的效果，通过浮动，是元素在同一行，浮动会脱离文档流，可以给a标签设置宽高，可以设置一些外边距，使得好看一些。注意设置出现内容的消失，我们默认只出现第一个。
a{
text-decoration: none;
width: 180px;
height: 30px;
line-height: 30px;
text-align: center;
color: #666;
float: left;
margin-right: 15px;
}
.nav a{
background-color: beige;
}
.nav a.hover{
background-color: blue;
}
.nav_con div:first-child~div{
display: none;
}
.nav::after{
content: '';
display: block;
clear: both;
}
.nav_con{
margin-bottom: 50px;
}
五、JS代码内容
按照顺序来，流程如下：
[*]获取元素
[*]通过委派给父亲添加监听事件
[*]先获得当前的父节点，在通过父节点获得所有的子节点
[*]设置排他思想
[*]给每一个子节点加上一个自定义属性 index
[*]获取当前被点击的nav a上面的属性index
[*]获取当前元素的父级元素，在获得父级的兄弟，在找到子元素
[*]当前nav_con 显示内容
[*]当前节点获得hover样式
let navNodes = document.querySelectorAll('.nav');
for(let i=0;i<navNodes.length;i++){
//通过委派给父亲添加监听事件
navNodes.addEventListener('click',function(e){
//先获得当前的父节点，在通过父节点获得所有的子节点
let navs = e.target.parentNode.children;
//设置排他思想
for(let j=0;j<navs.length;j++){
navs.className='';
//给每一个子节点加上一个自定义属性 index
navs.setAttribute("index",j)
}
//获取当前被点击的nav a上面的属性index
let thisIndex = e.target.getAttribute("index");
//获取当前元素的父级元素，在获得父级的兄弟，在找到子元素
let nav_cons = e.target.parentNode.nextElementSibling.children;
for(let j=0;j<nav_cons.length;j++){
nav_cons.style.display = "none";
}
//当前nav_con 显示内容
nav_cons.style.display="block"
//当前节点获得hover样式
e.target.className = "hover"
})
}
六、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
width: 180px;
height: 30px;
line-height: 30px;
text-align: center;
color: #666;
float: left;
margin-right: 15px;
}
.nav a{
background-color: beige;
}
.nav a.hover{
background-color: blue;
}
.nav_con div:first-child~div{
display: none;
}
.nav::after{
content: '';
display: block;
clear: both;
}
.nav_con{
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="tab">
<div class="nav">
<a href="javascript:;" class="hover">公司新闻</a>
<a href="javascript:;">公司动态</a>
<a href="javascript:;">行业新闻</a>
</div>
<div class="nav_con">
<div>内容</div>
<div>动态</div>
<div>行业</div>
</div>
</div>
<div class="tab">
<div class="nav">
<a href="javascript:;" class="hover">大学</a>
<a href="javascript:;">中学</a>
<a href="javascript:;">小学</a>
</div>
<div class="nav_con">
<div>大学内容</div>
<div>中学内容</div>
<div>小学内容</div>
</div>
</div>
<script>
let navNodes = document.querySelectorAll('.nav');
for(let i=0;i<navNodes.length;i++){
//通过委派给父亲添加监听事件
navNodes.addEventListener('click',function(e){
//先获得当前的父节点，在通过父节点获得所有的子节点
let navs = e.target.parentNode.children;
for(let j=0;j<navs.length;j++){
navs.className='';
//给每一个子节点加上一个自定义属性 index
navs.setAttribute("index",j)
}
//获取当前被点击的nav a上面的属性index
let thisIndex = e.target.getAttribute("index");
//获取当前元素的父级元素，在获得父级的兄弟，在找到子元素
let nav_cons = e.target.parentNode.nextElementSibling.children;
for(let j=0;j<nav_cons.length;j++){
nav_cons.style.display = "none";
}
//当前nav_con 显示内容
nav_cons.style.display="block"
//当前节点获得hover样式
e.target.className = "hover"
})
}
</script>
</body>
</html>
页:
[1]