用div实现单选按钮组，把按钮样式写活+排他功能实现

小小红色无花果

已于 2022-11-20 23:58:54 修改

阅读量1k

点赞数 1

文章标签： css html 前端

于 2022-11-15 22:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_45096939/article/details/127789109

版权

效果如下：

这是一个用div标签实现的单选按钮效果，配合点击方法，每次只能选择一个，选中的时候又添加样式

代码如下：

<template>
  <div class="appBody">
    <div
      :class="allQuote == 'orange' ? 'tabs tabs_active' : 'tabs'"
      @click="tabsClick('orange')"
    >
      橙子🍊
    </div>
    <div
      :class="allQuote == 'apple' ? 'tabs tabs_active' : 'tabs'"
      @click="tabsClick('apple')"
    >
      苹果
    </div>
    <div
      :class="allQuote == 'banana' ? 'tabs tabs_active' : 'tabs'"
      @click="tabsClick('banana')"
    >
      香蕉🍌
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allQuote: "apple",  // 默认显示的选项
    };
  },
  mounted() {},
  methods: {
    tabsClick(value) {
      this.allQuote = value;
      switch (value) {
        case "orange":
          break;
        case "apple":
          break;
        case "banana":
          break;
      }
    },
  },
};
</script>
<style>
.appBody {
  margin-top: 100px;
  margin-left: 100px;
}
.tabs {
  display: inline-block;
  height: 45px;
  width: 110px;
  line-height: 50px;
  border: 4px solid #ccc;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
.tabs_active {
  cursor: pointer;
  /* 设置背景色渐变 */
  border: 4px solid;
  border-image: linear-gradient(to right, #6420f6,#968bf6 ) 4;
}
</style>

排他功能和上面点击改变div样式差不多的效果，如下：

代码👇🏻：

<!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>排他功能</title>
</head>

<body>
    <input type="button" value="开心">
    <input type="button" value="开心">
    <input type="button" value="开心">
    <input type="button" value="开心">
    <input type="button" value="开心">
    <input type="button" value="开心">
    <input type="button" value="开心">

    <script>
        var btnObjs = document.getElementsByTagName("input");
        for (var i = 0; i < btnObjs.length; i++) {
            btnObjs[i].onclick = function () {
                for (var j = 0; j < btnObjs.length; j++) {
                    btnObjs[j].value = "开心";
                }
                this.value = "不开心";
            };
        }
    </script>
</body>

</html>