前言: 我是实习两个月的前端开发实习生, 最近在制作公司的官方网站过程中遇到了一个网页前端开发中比较普遍的需求: 点击不同的按钮 页面上的内容随之更换, 并且按钮的背景颜色也要呈现为被选中的样式. 以此文记录一下我自己对于该需求的满足方法, 如果有更好的方案欢迎留言讨论.
本文字数: 6000字
阅读时间: 10分钟
先放一个效果图:
可以看到, 这里我们有四个板块: [产品描述], [产品特征], [详情图示], [重要参数], 点击按钮后, 按钮呈现被选中的 深蓝色样式, 下方的区域内容也随之改变.
让我们先来完成 按钮点击后颜色的转换
首先我们需要安排上4个按钮
给四个按钮绑上id: btn1 到 btn4. style样式中, 第一个按钮为默认选中按钮, 其背景色为 #25039A, 其余三个的背景色设为lightgrey
每个按钮都加上一个点击的listener, @click=“switchProduct(数字)” 点击后触发该函数并发送值1-4的对应值.
<div class="solutionBtns" style="width: 1120px; height: 50px; background-color: beige; margin-top: 30px;">
<button id="btn1" style="color: #fff; background-color: #20539A; width: 164px; height: 50px; margin-right: 1px;" @click="switchProduct(1)">产品描述</button>
<button id="btn2" style="color: #fff; background-color: lightgrey; width: 164px; height: 50px; margin-right: 1px;" @click="switchProduct(2)">产品特征</button>
<button id="btn3" style="color: #fff; background-color: lightgrey; width: 164px; height: 50px; margin-right: 1px;" @click="switchProduct(3)">详情图示</button>
<button id="btn4" style="color: #fff; background-color: lightgrey; width: 164px; height: 50px; margin-right: 1px;" @click="switchProduct(4)">重要参数</button>
</div>
然后我们需要当前页面的一个本地变量: lastBtn, 用于记录上一个被点击的按钮是谁, 因为当我们点击其他按钮时, 上一个按钮需要从#20539A的背景色转为lightgrey. 顺便也把之后要写的switchProduct函数先放进methods里面.
//本项目中我是用的是vue.js, 因此在当前组件的component中:
<script>
export default {
name: "example",
data(){
return {
lastBtn: 'btn1' //因为页面中默认的第一个按钮为btn1
}
},
methods: {
switchProduct(btnNum) {}
}
接下来就是函数switchProduct() 的编写了, 我采用了switch的方法来写本案例中的4个情况. 通过传入的btnNum来判断是哪一种情况:
由@click这个listener传入的值 为 integer 1, 2, 3, 4, 而我们上面按钮的id绑定为 btn1, btn2, btn3, btn4, 所以在该函数中, 关于按钮id 应该为 字符串’btn’ + btnNum.toString()
switchProduct(btnNum) {
//首先判断点击的按钮是不是当前已选中的按钮, 如果是的话 说明我们正在重复点击一个按钮, 直接return
if ('btn'+btnNum.toString() == this.lastBtn)
return
//如果点击的是新的按钮, 那么就需要切换了.
var vanish;
var appear;
switch (btnNum) {
case 1: //进入了case1, 说明刚刚点击的按钮是btn1, 并且之前的按钮不是btn1
//vanish绑定到上一个被点击的按钮, 并将其背景色改为lightgrey
vanish = document.getElementById(this.lastBtn);
vanish.style.backgroundColor = "lightgrey";
//appear绑定到id为 'btn1'的按钮上, 并将其背景色改为#205936A
appear = document.getElementById('btn1');
appear.style.backgroundColor = "#20539A";
//改完颜色后, 将全局变量lastBtn的值设为 'btn1'
this.lastBtn = 'btn1';
break;
case 2:
vanish = document.getElementById(this.lastBtn);
vanish.style.backgroundColor = "lightgrey";
appear = document.getElementById('btn2');
appear.style.backgroundColor = "#20539A";
this.lastBtn = 'btn2';
break;
case 3:
vanish = document.getElementById(this.lastBtn);
vanish.style.backgroundColor = "lightgrey";
appear = document.getElementById('btn3');
appear.style.backgroundColor = "#20539A";
this.lastBtn = 'btn3';
break;
case 4:
vanish = document.getElementById(this.lastBtn);
vanish.style.backgroundColor = "lightgrey";
appear = document.getElementById('btn4');
appear.style.backgroundColor = "#20539A";
this.lastBtn = 'btn4';
break;
}
通过上面的函数, 实际的流程就如下所示:
点击一个按钮=> 按钮已经被选中 => 不操作;
按钮没有被选中 => 将之前的按钮背景色改为灰色 => 点击的按钮改为#20539A色 => 将新按钮的id登记到lastBtn上.
此时按钮就可以随着点击的操作, 切换其背景色.
接下来是关于详细内容的切换
这里要用到css的一个特点 display属性与visibility属性的区别.
visibility是指该元素在网页中的可见性, 他可以设置为hidden.例如
<div style="visibility: hidden;">真就白给啊</div>
<p> WDNMD </p>
当我们写成这样时, 页面上只会显示 WDMND, 不会显示第一句话, 但是他所占用的空间依然存在. 所以WDMND会显示在第二行.
当我们使用display, 例如:
<div style="display: none;"> 我崩溃了 </div>
<p> WDNMD </p>
当我们写成这样时, “我崩溃了” 这句话就从这个页面上去除了, WDNMD就会出现在第一行.
如果你玩过dota2的话, 这里有一个形象的比喻, display和visibility就像 赏金猎人和隐形刺客, 他们都可以隐身, 但是 display: none就是赏金开了疾风步, 没有碰撞体积; visibility: hidden就是隐刺的隐身被动, 有碰撞体积.
有了上面对display和visibility的认识, 关于详细内容的切换 就变得非常容易了.
首先我们需要在四个按钮的
并且每一个div都绑定上id, id=“content1” 到 “content4”
之后我们用同样的思路, 把当前被选中的内容标为 lastContent.
data(){
return {
lastBtn: 'btn1',
lastContent: 'content1'
}
在之前的switchProduct函数中, 我们只需要加入对应的content的display属性进行设置即可, 非常的简单
switchProduct(btnNum) {
if ('btn'+btnNum.toString() == this.lastBtn)
return
var vanish;
var vanish_content;
var appear;
var appear_content;
switch (btnNum) {
case 1:
vanish = document.getElementById(this.lastBtn);
vanish_content = document.getElementById(this.lastContent)
vanish.style.backgroundColor = "lightgrey";
vanish_content.style.display = 'none';
appear = document.getElementById('btn1');
appear_content = document.getElementById('content1');
appear.style.backgroundColor = "#20539A";
appear_content.style.display = 'block';
this.lastContent = 'content1';
this.lastBtn = 'btn1';
break;
case 2:
vanish = document.getElementById(this.lastBtn);
vanish_content = document.getElementById(this.lastContent);
vanish.style.backgroundColor = "lightgrey";
vanish_content.style.display = 'none';
appear = document.getElementById('btn2');
appear_content = document.getElementById('content2');
appear.style.backgroundColor = "#20539A";
appear_content.style.display = 'block';
this.lastBtn = 'btn2';
this.lastContent ='content2';
break;
case 3:
vanish = document.getElementById(this.lastBtn);
vanish_content = document.getElementById(this.lastContent);
vanish.style.backgroundColor = "lightgrey";
vanish_content.style.display = 'none';
appear = document.getElementById('btn3');
appear_content = document.getElementById('content3');
appear.style.backgroundColor = "#20539A";
appear_content.style.display = 'block';
this.lastBtn = 'btn3';
this.lastContent ='content3';
break;
case 4:
vanish = document.getElementById(this.lastBtn);
vanish_content = document.getElementById(this.lastContent);
vanish.style.backgroundColor = "lightgrey";
vanish_content.style.display = 'none';
appear = document.getElementById('btn4');
appear_content = document.getElementById('content4');
appear.style.backgroundColor = "#20539A";
appear_content.style.display = 'grid';
this.lastBtn = 'btn4';
this.lastContent ='content4';
break;
}
在上面的代码中, 将content设置为不可见, 即为: content.style.display = “none”, 注意别忘了引号;
设为可见, 即为: content.style.display = “block”, 别忘记了每个case要保存当前的lastContent.
需要注意的是, 如果你的content像我一样使用了CSS-Grid来进行排版的话, display设置成block会使之前设置的Grid失效. 所以在case4中 我设置成了 content.style.display = “grid” 而不是 block.
如果有display相关属性的设置可以查看这个网页:
CSS display属性的信息
以上就是我针对这项网页开发中的要求想出来的解决方案, 如果有更好的办法欢迎留言讨论.
本公众号中的文章用于计算机相关行业的学习讨论使用, 仅供参考. 禁止任何非法的盗取和商用行为.
4676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
