logo标签列表

如何创建一个切换按钮？

jqueryhtmlcss
110
我想使用CSS在HTML中创建一个切换按钮。我希望当您单击它时，它会被按下，并且再次单击它时，它会弹出。如果仅使用CSS无法实现，请问是否可以使用jQuery实现？
18个回答
94

最佳方式是使用复选框，并在选中或未选中时以不同的方式进行样式设置。但实际上没有好的方法可以做到这点。你必须添加额外的span、div，为了获得更好的外观，还需要添加一些JavaScript。

因此，最好的解决方案是使用一个小的jQuery函数和两个背景图像来为按钮的两种不同状态设置样式。以下是一个带有上/下效果的示例，通过边框实现：

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

显然，您可以添加代表按钮上和按钮下的背景图像，并使背景颜色透明。

17
这是一个带有代码的JS Fiddle，您可以在其中实时尝试...http://jsfiddle.net/LmULE/ - Evan
FYI：我做了与这篇文章相同的事情，只是使用了Google Dart。http://steelpinjata.com/2014/03/20/toggle-buttons-in-dart/。注意：可以在Chromium中运行，但可以编译为JavaScript并在其他现代浏览器中运行。IE不算作浏览器;-) - NullPumpkinException
51

JQuery UI使创建切换按钮变得轻而易举。只需将此代码放置：

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

在你的页面上，然后在你的body标签内使用onLoad或者$.ready()（如果你正在构建一个ajax网站，则使用一些对象字面量的init()功能...）像这样添加一些jQuery：

$("#myToggleButton").button()

就这些了。(不要忘记< label for=...> 因为JQueryUI使用它来作为切换按钮的正文。)

从那里开始，您只需像处理任何其他input="checkbox"一样处理它，因为底层控件仍然是复选框，但JQuery UI将其外观美化成一个漂亮的切换按钮。

鉴于 OP 添加了 jQuery 标签，这是一个很好的答案。考虑到可以使用 jQueryUI 来提供一致的样式。 - Joe Johnston
36

以下是使用纯CSS的示例:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }
<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

20

结合这个答案，您还可以使用类似于移动设置切换器的样式。

togglers

HTML

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

这个可能还不够漂亮，但可以传达思路。
一个优点是它可以用CSS动画实现。
Fiddler

9
如果你想要一个合适的按钮，那么你需要一些javascript。类似这样（样式还需要调整），老实说，对于这样微不足道的事情，不必使用jquery。
<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
8

纯 CSS 以极简主义的方式

你只需要一个带有背景作为滑块的复选框。结果是可以使用键盘访问的。

input {
  appearance: none;
  padding: 16px 32px;
  border-radius: 16px;
  background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) #ccc -16px;
  transition: 0.3s ease-in-out;
}

:checked {
  background-color: dodgerBlue;
  background-position: 16px;
}
<input type="checkbox">

1
太棒了，如此简单而优雅！没有 label、div、span，只有一个 input type="checkbox"，完美。这是一个基于这个版本的方角版本。 - Basj
6
您可以使用toggleClass()来跟踪状态。然后检查按钮元素是否具有该类，如下所示：
$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

出于语义化的原因，我使用 button 元素作为按钮。

<button class="toggler">Toggle me</button>
3
你可以使用一个锚点元素（<a></a>），并使用a:active和a:link来切换背景图像以打开或关闭。只是个想法。
编辑：上述方法对于切换不太有效。但你不需要使用jquery。为元素编写一个简单的onClick JavaScript函数，该函数将适当地更改背景图像以使其看起来像按钮被按下，并设置一些标志。然后在下一次点击时，图像和标志将恢复。像这样。
var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

而HTML代码如下： <div id="toggleDiv" onclick="toggle()">一些内容</div>
2
我认为使用JS创建按钮不是一个好的做法。如果用户的浏览器禁用了JavaScript怎么办？
此外，您可以使用复选框和一些CSS来实现它。而且很容易检索到您的复选框的状态。
这只是一个例子，但您可以按照自己的想法进行样式设置。

http://jsfiddle.net/4gjZX/

HTML（超文本标记语言）
<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

CSS（层叠样式表）
.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

希望这可以帮助到你。
2
我倾向于在你的CSS中使用一个类来改变边框样式或边框宽度，使按钮按下时看起来像切换按钮。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接