如何制作3按钮滑动拨动开关[关闭]答案

【问题标题】：How to make a 3 button sliding toggle switch [closed]如何制作3按钮滑动拨动开关[关闭]
【发布时间】：2021-05-27 20:53:32
【问题描述】：

嘿，伙计们，我想知道如何在 javascript 中制作切换滑动开关按钮使用 javascript 三个按钮在一起并且工作正常我只是想让它们成为 3 合 1 滑动切换开关，但里面没有任何文本，如果我点击 2 个主题或 3 个主题或像 2 个主题一样向后移动，它们会向前移动一点或 1 个主题，我希望它们看起来像这样这是图像主题：

这是 HTML 代码：

<!doctype html>
<html>
<body>
<div>
<button onclick="theme1()">1</button>
<button onclick="theme2()">2</button>
<button onclick="theme3()">3</button>
</div>
</body>
</html>

请你们帮我把这个按钮弄得像图片中的一样漂亮，滑动按钮和切换一个主题到另一个

祝大家有个愉快的一天，编码愉快！

【问题讨论】：

发布你的 CSS 和 JavaScript，阅读 minimal reproducible example。您的问题过于宽泛，未能表明您为实现目标所做的任何努力。

标签： javascript css slidetoggle

【解决方案1】：

这对你有用吗？

.switch-toggle {
   float: left;
   background: black;
   border-radius: 2px;
   width: 90px;
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
  width: 30%;
}
.switch-toggle input + label {
  padding: 10px;
  float:left;
  color: black;
  cursor: pointer;
}
.switch-toggle input:checked + label {
  background: red;
  border-radius: 50%;
}

.numberDiv {
  width: 90px;
  display: flex;
  padding-left: 10px;
  }
 
 .numberDiv p {
   width: 30%;
   }

<div class='numberDiv'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<div class="switch-toggle switch-3 switch-candy">

  <input id="on" name="state-d" type="radio" checked="" />
  <label for="on" onclick="">1</label>

  <input id="off" name="state-d" type="radio"  />
  <label for="off"onclick="">2</label>

  <input  id="na" name="state-d" type="radio" checked="checked"  />
  <label for="na" class="disabled" onclick="">3</label>

</div>

【讨论】：

不，那不会，因为我正在做这个项目，我必须有上图中的滑动切换按钮，但谢谢你，我很感激?

【解决方案2】：

 let toggleSwitch = document.getElementsByClassName('redButton')[0]

        function go_to_1() {
            toggleSwitch.classList.add('horizTranslate1');
            toggleSwitch.classList.remove('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate3');
            document.getElementById("outerContainer").style.backgroundColor = "#4A5B7E"
            document.getElementById("buttonContainer").style.backgroundColor = "#222D41"
            document.getElementById("legendTextContainer").style.color = "#ffffff"
            doStuff(1)
        }

        function go_to_2() {
            toggleSwitch.classList.add('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate3');
            toggleSwitch.classList.remove('horizTranslate1');
            document.getElementById("outerContainer").style.backgroundColor = "#E5E5E5"
            document.getElementById("buttonContainer").style.backgroundColor = "#D3CCCA"
            document.getElementById("legendTextContainer").style.color = "#222222"
            doStuff(2)
        }

        function go_to_3() {
            toggleSwitch.classList.add('horizTranslate3');
            toggleSwitch.classList.remove('horizTranslate2');
            toggleSwitch.classList.remove('horizTranslate1');
            document.getElementById("outerContainer").style.backgroundColor = "#000000"
            document.getElementById("buttonContainer").style.backgroundColor = "#444444"
            document.getElementById("legendTextContainer").style.color = "#E2D241"
            doStuff(3)
        }

        function doStuff(n) {
            document.getElementById("message").innerHTML = "Switch is in position " + n
            //your code here...
        }

.redButton.horizTranslate2 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(20px);}
.redButton.horizTranslate3 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(40px);}
.redButton.horizTranslate1 { -webkit-transition: -webkit-transform 0.1s linear; -webkit-transform: translateX(0px);}
#outerContainer{position:relative; width:111px; height:98px; background-color:#4A5B7E;}
#buttonContainer{background-color: #222D41; width:71px; height:28px; position:relative; left:20px; top:45px; border-radius:14px;}
.redButton{width:16px; height:16px; background-color:#DB3D2B; border-radius:8px; position:relative; top:6px; left:6px;}
#legendTextContainer{left:22px; display:inline-block;position:absolute; top:23px; color:#ffffff;font-family:Arial; font-size:10pt;text-align:center;}
.legendText{display:inline-block;width:20px; padding-bottom:33px; cursor:default; user-select: none;}
#message{border:1px solid #cccccc; display:inline-block; padding:4px; margin-top: 6px; font-family:Arial; font-size:10pt;}

    <div id="outerContainer">
        <div id="buttonContainer">
            <div class="redButton"></div>
        </div>

       <div id="legendTextContainer">
            <div class="legendText" onclick="go_to_1()">1</div><div
                 class="legendText" onclick="go_to_2()">2</div><div
                 class="legendText" onclick="go_to_3()">3</div>
        </div>
    </div>
    <div id="message">Switch is in position 1</div>

【讨论】：

您可以在 doStuff() 中加载 3 个外部样式表 - 请参阅 stackoverflow.com/questions/14292997/…
天哪，这正是我想要的，非常感谢?