html button 按钮单选且 高亮

发布于:2024-12-06 ⋅ 阅读:(231) ⋅ 点赞:(0)

      <DIV class="middle">

            <div class="containerTarget">

    <span class="hover-target1" οnclick="btn(1);">韵达 </span>

    <span class="hover-target2" οnclick="btn(2);">中通 </span>

    <span class="hover-target3" οnclick="btn(3);">圆通 </span>

              </div>

        </DIV>

 function go_savebtn(e) {

            if (e == '1') {

                if (document.querySelector(".hover-target1")) {

                    document.querySelector(".hover-target1").className = 'hover-static1'

                }

                else {

                    document.querySelector(".hover-static1").className = 'hover-target1'

                }

            } else if (e == '2') {

                if (document.querySelector(".hover-target2")) {

                    document.querySelector(".hover-target2").className = 'hover-static2'

                }

                else {

                    document.querySelector(".hover-static2").className = 'hover-target2

                }

            } else if (e == '3') {

                if (document.querySelector(".hover-target3")) {

                    document.querySelector(".hover-target3").className = 'hover-static3'

                } else {

                    document.querySelector(".hover-static3").className = 'hover-target3'

                }

            }

        }

 .hover-target1,

        .hover-target2,

        .hover-target3 {

            cursor: pointer;

            background-color: #fff(64, 158, 255, 1);

            color: #000;

        }

        .hover-static1,

        .hover-static2,

        .hover-static3 {

            cursor: pointer;

            background-color: rgba(64, 158, 255, 1);

            color: white;

        }

        .hover-target1:hover,

        .hover-target2:hover,

        .hover-target3:hover {

            cursor: pointer;

            background-color: rgba(64, 158, 255, 1);

            color: white;

            border-radius: 5px;

            border: 1px solid #ccc;

            width: 136px;

            height: 40px;

        }


网站公告

今日签到

点亮在社区的每一天
去签到