葬空吟 2021-11-11 09:27 采纳率: 61.3%
浏览 29
已结题

有4组按钮让其每组都能显示一个选中

一共4组按钮,需要每组按钮都要点上一个,点上之后有选中的背景色,应该怎么弄?(请忽略丑陋的颜色搭配)

img


代码如下:

<div class="modal-body" style="color: #fff;">
     <div class="row one">
                            <button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-1">1-1</button>
                            <button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-2">1-2</button>
                            <button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-3">1-3</button>
                            <button tabindex="1" id="btncar" onclick="typeOfCar(this.value)" value="1-4">1-4</button>
     </div>
    <div class="row two">
         <div class="col-xs-1">
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-1">2-1</button></br>
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-2">2-2</button></br>
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-3">2-3</button></br>
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-4">2-4</button></br>
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-5">2-5</button></br>
                                <button tabindex="2" id="btndep" onclick="cardep(this.value)" value="2-6">2-6</button></br>
          </div>
     </div>
 </div>

CSS代码:

 .modal-body {
    color: #fff;
    padding: .0625rem;
    .one {
      height: 8%;
      margin-left: 0rem;

      #btncar {
        color: #fff;
        background-color: blue;
        padding: .0625rem .0625rem .0625rem .0625rem;
        width: 24.6%;
        height: 98%;

      }
      #btncar:hover {
        background-color: #4CAF50; /* Green */
        color: white;
      }
      #btncar:focus {
        background-color: #4CAF50; /* Green */
        color: white;
      }

      
    }

    .two {
      margin-left: 0rem;
      .col-xs-1 {
        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem .0625rem 0rem 0rem;
        #btndep {
          color: #fff;
          background-color: green;
          width: 100%;
          height: 13%;
          margin-top: 3%;
          margin-right: 0px;

        }
        #btndep:hover {
          background-color: #4CAF50; /* Green */
          color: white;
        }
        #btndep:focus {
          background-color: #4CAF50; /* Green */
          color: white;
        }

  • 写回答

1条回答 默认 最新

  • 本堃不方 2021-11-11 10:04
    关注

    节点操作,初始给一个显示的class例如active,点击的时候,移除active,给这个按钮添加active,

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 1月12日
  • 已采纳回答 1月4日
  • 创建了问题 11月11日

悬赏问题

  • ¥15 爬虫爬取网站的一些信息
  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码,代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥100 栈回溯相关,模块加载后KiExceptionDispatch无法正常回溯了
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含
  • ¥15 麒麟V10桌面版SP1如何配置bonding
  • ¥15 Marscode IDE 如何预览新建的 HTML 文件