JavaScript网页中点击按钮切换显示的内容

前言: 我是实习两个月的前端开发实习生, 最近在制作公司的官方网站过程中遇到了一个网页前端开发中比较普遍的需求: 点击不同的按钮 页面上的内容随之更换, 并且按钮的背景颜色也要呈现为被选中的样式. 以此文记录一下我自己对于该需求的满足方法, 如果有更好的方案欢迎留言讨论.

本文字数: 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.<