目录
一、效果展示
二、实现的大致原理
三、H5的布局
四、CSS样式
五、JS代码内容
六、完整代码
一、效果展示
二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式（有代码参考）
文章图片
2.在获得样式，给我们所需要点击的目标设置监听事件，在获取节点，设置一个自定义的节点属性index,通过它在获取点击出现样式的节点，在经过寻找元素，设置全取消，点击相应的节点出现的效果。这里获取节点方式，都是通过点击元素获取父元素，在获得子元素，同级获得兄弟元素，在获取兄弟元素的子元素（笼统的解释，细节部分看代码段的解释）
三、H5的布局 没有特殊的地方，都是基本的写法，只要给定一定的选择器就可以了
公司新闻
公司动态
行业新闻内容
动态
行业大学
中学
小学大学内容
中学内容
小学内容四、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六、完整代码
Document - 锐客网 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;
}公司新闻
公司动态
行业新闻内容
动态
行业大学
中学
小学大学内容
中学内容
小学内容
【#|通过JavaScript、css、H5 实现简单的tab栏的切换和复用】
推荐阅读
- #|【 探讨一下 】Vue的生命周期
- #|【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别
- #|通过JavaScript 实现简单的全选、不全选的思想
- #|ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。（含例题）
- Vue基础知识|vue-router4之路由传参
- 人生苦短-我用Python|python爬取网页图片详解
- css相关|css实现元素水平垂直居中——6种方式
- vue|vuex4实现原理
- 测试|UI自动化