使用js完成简单的切换标签页功能
1.话不多说,咱先上demo,写的比较随便,二三界面并没有完善,但是主要咱们看功能,
我这里写的是手机项目,基本这种需求也就是手机界面比较常见,其实纯css也能实现上图中所有的动态效果,我之前写过一篇css切换标签页的文章,有需要的可以去看看,轮播图以后也会出一篇css与js的文章
2.首先css我不多说了,起名要有顺序 关键的地方我在下面标注下
一共6张图片 3张点击前的 3张点击后的
三张点击前图片我的命名方式都是从1到3 方便for循环遍历到
三张点击后的图片也是如此 但要和点击前的有区分 符合命名规范 方便遍历
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 注意要符合手机端开发规范 使用vw vh rem单位 */
body,
html {
width: 100%;
font-size: 10px;
}
/* 设置相对定位 方便底部的固定定位 */
body {
position: relative;
}
/* 设置每个标签高占视图框100% */
#tabcon {
height: 100vw;
}
/* 第二个第三个界面隐藏掉 默认有第一个界面的 */
#tabcon:nth-child(2),
#tabcon:nth-child(3) {
display: none;
}
/* 父相子绝 这里父是body,用固定定位定位到body最底部 */
.footer_index {
z-index: 1;
position: fixed;
bottom: 0;
width: 100vw;
height: 7vh;
background-color: white;
border-top: 1px solid #ddd
}
.footer_ul {
width: 100vw;
height: 100%;
list-style: none;
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
}
</style>
<body>
<div id="tabcon">第一个界面</div>
<div id="tabcon">第二个界面</div>
<div id="tabcon">第三个界面</div>
<footer class="footer_index">
<ul class="footer_ul" id="ul_footer">
<li class="tab">
<img class="picb" src="../assets/image/01_check.png" alt="">
<!-- 注意第一个默认点击的所以放入的是第二张图片(点击后的图片) -->
<p>首页</p>
</li>
<li class="tab">
<img class="picb" src="../assets/image/2_out.png" alt="">
<p>订单</p>
</li>
<li class="tab">
<img class="picb" src="../assets/image/3_out.png" alt="">
<p>我的</p>
</li>
</ul>
</footer>
</body>
完成的界面应该如上
3.js部分我列出来 在代码中讲解
var tab = function () {
var tabli = document.getElementsByClassName("tab")
// 根据class获取包含3个li的类数组 方便下面for遍历
var imgblock = document.querySelectorAll(".picb")
// 根据id获取3个图片的类数组 方便下面遍历修改
var tabcon = document.querySelectorAll('#tabcon')
// 根据id获取三个界面的类数组 方便for遍历修改
for (var i = 0; i < tabli.length; i++) {
// 首先遍历所有的tabli 也就是三个li
tabli[i].index = i
// 将此时的i保存起来放入到每个对应的li的方法中,这样每个li自身都存在它在执行时最初的i值了
tabli[i].onclick = function () {
// 给每个li添加点击事件 点击时触发方法 执行
for (var i = 0; i < tabli.length; i++) {
// 函数体内遍历 所有li 是为了设置一个默认样式 全部没有点击的样式
imgblock[i].src = '../assets/image/' + `${i + 1}` + '_out.png'
// 排他思想:将所有的img的地址都设置为点击之前的图片 这里字符串拼接不讲了 但是注意我的i从0开始循环的
// 但是图片和i要对应起来 图片要+1 比如遍历了li[0]、li[1]、li[2]三个 图片却是设置img[1],img[2],img[3]三个默认样式
}
imgblock[this.index].src = '../assets/image/0' + `${this.index + 1}` + '_check.png'
// 还记得我们上面保存的i吗,为什么要保存呢,因为函数体内的执行完毕了 最后的i肯定是3 拿过来完全没有意义啊,函数外的i咱又拿不进来
// 所以我们在设置点击事件的时候就保存下i this的意思是谁调用就指向谁,我们点击哪个按钮 对应的就是哪个按钮调用了函数 这里的this就
// 是对应的按钮,我们每个按钮还都在里面自定义了一个index方法,保存了每个页面i的值,想想:其中一个按钮点击了,这个按钮的i值被保存了
// 进入到了函数体内,然后你把所有的图片设置成了默认灰色,又把当前调用这个函数的按钮的i值拿过来了 当前按钮上的图片是不是可以设置
// 成你想要的样式 +1的原因和上面一样 现在你点击任何按钮都是全部恢复默认 把你点击的按钮变成你想要的图片
for (var j = 0; j < tabli.length; j++) {
// 界面的道理和上面相似 先遍历
tabcon[j].style.display = 'none'
// 将所有的界面都隐藏
}
tabcon[this.index].style.display = 'block'
// 设置处于点击按钮上的页面为block
}
}
}
tab()
// 执行
到此为止,界面功能就实现了。
由于经验不足,文章难免有错误,望理解或评论告知我,方便我修改,防止误导他人,谢谢!