首页>Program>2021-01-09 17:26source

jquery:如何创建切换按钮？

我想使用CSS在html中创建一个切换按钮.我想要它，以便当您单击它时，它保持推入状态，而不是再次单击时它弹出.

如果没有办法仅使用CSS.有没有一种使用jQuery的方法？

105

jquery

html

css

最新回答

2021-1-9

1 #

好的语义方法是使用一个复选框，然后对它进行样式设置（无论是否选中）.但是没有好的方法可以做到这一点.您必须添加额外的跨度，额外的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>

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

2021-1-9
2 #
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只是将其外观使其看起来像屏幕上的漂亮切换按钮。

2021-1-9

3 #

这是使用 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>

2021-1-9

4 #

结合此答案，您还可以使用这种样式，例如移动设置切换器。

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');
    });
});

可能更漂亮，但给出了这个主意。
优点之一是可以使用jquery和/或CSS3对其进行动画处理
提琴手

2021-1-9

5 #

如果您想要一个合适的按钮，那么您将需要一些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>

Codebug

jquery:如何创建切换按钮？

jquery

html

css

相关问题