如何制作3按钮滑动拨动开关[关闭]
Posted
技术标签:
【中文标题】如何制作3按钮滑动拨动开关[关闭]【英文标题】：How to make a 3 button sliding toggle switch [closed] 【发布时间】：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。您的问题过于宽泛，未能表明您为实现目标所做的任何努力。 【参考方案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);
#outerContainerposition:relative; width:111px; height:98px; background-color:#4A5B7E;
#buttonContainerbackground-color: #222D41; width:71px; height:28px; position:relative; left:20px; top:45px; border-radius:14px;
.redButtonwidth:16px; height:16px; background-color:#DB3D2B; border-radius:8px; position:relative; top:6px; left:6px;
#legendTextContainerleft:22px; display:inline-block;position:absolute; top:23px; color:#ffffff;font-family:Arial; font-size:10pt;text-align:center;
.legendTextdisplay:inline-block;width:20px; padding-bottom:33px; cursor:default; user-select: none;
#messageborder: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 个外部样式表 - 请参阅 ***.com/questions/14292997/… 天哪，这正是我想要的，非常感谢?以上是关于如何制作3按钮滑动拨动开关[关闭]的主要内容，如果未能解决你的问题，请参考以下文章