Html 多切换器工作不正确
我正试图做一个开/关开关,但它工作不正常。我和开关有几排。它是自动生成的,因此当我单击除第一行之外的每一行时,它都会切换到一行 以下是html:Html 多切换器工作不正确,html,css,Html,Css,我正试图做一个开/关开关,但它工作不正常。我和开关有几排。它是自动生成的,因此当我单击除第一行之外的每一行时,它都会切换到一行 以下是html: <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
我尝试只使用CSS,而不使用JS(JQuery等…)
您能告诉我出了什么问题吗?您的代码是正确的,下面是一个示例: 您应该为元素设置唯一的
id
和name
属性
name=“onoffswitch”
id=“myonoffswitch”
和for=“myonoffswitch”
必须是唯一的
我只是添加了一个增量数字,如
name=“onoffswitch1”
id=“myonoffswitch1”
和for=“myonoffswitch1”
name=“onoffswitch2”
id=“myonoffswitch2”
和for=“myonoffswitch2”
name=“onoffswitch3”
id=“myonoffswitch3”
和for=“myonoffswitch3”
它正在工作。有什么问题吗?@ketan,我做了一个表格,所以带swither的单元格会自动生成,当我切换时,2,3等等。。。每次只切换1-st
.onoffswitch {
position: relative;
width: 88px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 1px solid #D6D6D6;
border-radius: 5px;
}
.onoffswitch .onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 33px;
padding: 0;
line-height: 33px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-label .onoffswitch-inner:before {
content: "Yes";
padding-left: 10px;
background-color: blue; color: #FFFFFF;
}
.onoffswitch-label .onoffswitch-inner:after {
content: "No";
padding-right: 10px;
background-color: #ccc; color: #999999;
text-align: right;
}
.onoffswitch-label .onoffswitch-switch {
display: block;
width: 30px;
margin: 5px 0;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 53px;
border: 2px solid #D6D6D6; border-radius: 5px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label > .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label >.onoffswitch-switch {
right: 0px;
}