你如何创建一个切换按钮？
我想用hss在html中创建一个切换按钮.我想要它,以便当你点击它时,它会保持推入状态,而当你再次点击它时,它会弹出.
如果没有办法只使用CSS.有没有办法用jQuery做到这一点？
ale*_*eia 87
好的语义方式是使用复选框,然后如果选中或不选中,则以不同的方式设置它.但是没有好办法.你必须添加额外的跨度,额外的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>显然,您可以添加代表按钮和按钮的背景图像,并使背景颜色透明.
- 这是一个JS小提琴这个代码,所以你可以尝试实时... http://jsfiddle.net/LmULE/ (17认同)
小智 50
JQuery UI可以轻松创建切换按钮.就这样说吧
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
在你的页面上,然后在你的身体onLoad或你的$.ready()(或一些对象文字init()函数,如果你的建立一个ajax网站..)删除一些JQuery如下:
$("#myToggleButton").button()
而已.(不要忘记< label for=...>因为JQueryUI将其用于切换按钮的主体..)
从那里你就像任何其他人一样使用它input="checkbox"因为这是底层控件仍然是什么,但JQuery UI只是将它看起来像一个漂亮的切换按钮在屏幕上.
suh*_*lvs 25
这是一个使用示例pure 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>Pie*_*NAY 19
结合这个答案,您还可以使用这种类似移动设置切换器的样式.
HTML
<a href="#" class="toggler"> </a>
<a href="#" class="toggler off"> </a>
<a href="#" class="toggler"> </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');
});
});
可能更漂亮,但提出了这个想法.
一个优点是它可以使用jquery和/或CSS3 Fiddler进行动画处理
采用极简方法的纯 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">小智 7
如果你想要一个合适的按钮,那么你需要一些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>
您可以仅用于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>