Question

的index.html

<div class="wrap">
<div class="toggle">
<input type="checkbox"  onclick='window.location.assign("newuser.html")'/>
<span class="btn"></span>
<span class="texts"></span>
<span class="bg"></span>
</div>
</div>

Index.css

@import url(http://fonts.googleapis.com/css? family=Open+Sans:400,600|Lato:300,400,700&subset=latin,cyrillic);
* {
margin: 0;
padding: 0;
}

body {
background: #ecf0f1;
}

.wrap {
width: 90px;
margin: 50px auto;
}

.toggle {
position: relative;
width: 82px;
height: 35px;
border: 3px solid #f9f9f9;
border-radius: 40px;
}

.toggle input[type="checkbox"] {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 84px;
height: 34px;
}

.toggle .btn {
display: block;
position: absolute;
z-index: 4;
top: -3px;
left: -1px;
width: 37px;
height: 37px;
background: #F5F5F5;
border: 1px solid #e8e8e8;
border-radius: 100%;
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
transition: left .25s ease-in-out;
}

.toggle input[type="checkbox"]:checked ~ .btn {
left: 44px;
}

.toggle .texts {
position: absolute;
top: 9px;
z-index: 2;
width: 100%;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}

.toggle .texts:before {
content: "On";
position: absolute;
left: 12px;
}

.toggle .texts:after {
content: "Off";
position: absolute;
right: 11px;
}

.toggle .bg {
display: block;
background: #F56557;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
transition: background .25s ease-in;
}

.toggle input[type="checkbox"]:checked ~ .bg {
background: #48C893;
}

我正在创建一个Android移动应用程序，我在Eclipse Luna中运行了这段代码。我设法显示按钮但是当它被点击时，没有任何反应。

Answer 1

您的代码正常运行。样式已更改jekyll serve。

问题可能在其他地方

＆＃13;

onclick

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  background: #ecf0f1;
}
.wrap {
  width: 90px;
  margin: 50px auto;
}
.toggle {
  position: relative;
  width: 82px;
  height: 35px;
  border: 3px solid #f9f9f9;
  border-radius: 40px;
}
.toggle input[type="checkbox"] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 84px;
  height: 34px;
}
.toggle .btn {
  display: block;
  position: absolute;
  z-index: 4;
  top: -3px;
  left: -1px;
  width: 37px;
  height: 37px;
  background: #F5F5F5;
  border: 1px solid #e8e8e8;
  border-radius: 100%;
  box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
  transition: left .25s ease-in-out;
}
.toggle input[type="checkbox"]:checked ~ .btn {
  left: 44px;
}
.toggle .texts {
  position: absolute;
  top: 9px;
  z-index: 2;
  width: 100%;
  font-family: 'Lato', Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
}
.toggle .texts:before {
  content: "On";
  position: absolute;
  left: 12px;
}
.toggle .texts:after {
  content: "Off";
  position: absolute;
  right: 11px;
}
.toggle .bg {
  display: block;
  background: #F56557;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: inset 0 0px 2px 1px rgba(0, 0, 0, 0.3);
  transition: background .25s ease-in;
}
.toggle input[type="checkbox"]:checked ~ .bg {
  background: #48C893;
}

＆＃13;

Answer 2

请查看以下jsfiddle代码

您的onClick可能比您的愿景更快

您的代码似乎工作正常，请从您的结尾检查

单击

2 个答案: