本地js文件无法工作的引导4切换按钮
本地js文件无法工作的引导4切换按钮
提问于 2018-02-11 13:42:26
我找不到我在这里找到的按钮：https://codepen.io/aanjulena/pen/ZLZjzV
我在标题部分中链接了这些文件：
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="js/jquery-3.3.1.min.js" rel="script"/>
<link href="js/bootstrap.js" rel="script"/>
<link href="js/popper.js" rel="script"/>
<link href="css/switch.css" rel="stylesheet"/>
<link href="css/fontawesome-all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>我的切换按钮呈现正确，但在单击时不切换：
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-11 13:55:41
您忘记了密码子中包含的css的相关部分。
.btn-toggle.active {
background-color: #29b5a8;
}
.btn-toggle.btn-lg {
margin: 0 5rem;
padding: 0;
position: relative;
border: none;
height: 2.5rem;
width: 5rem;
border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
line-height: 2.5rem;
width: 5rem;
text-align: center;
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
bottom: 0;
transition: opacity .25s;
}
.btn-toggle.btn-lg:before {
content: 'Off';
left: -5rem;
}
.btn-toggle.btn-lg:after {
content: 'On';
right: -5rem;
opacity: .5;
}
.btn-toggle.btn-lg > .handle {
position: absolute;
top: 0.3125rem;
left: 0.3125rem;
width: 1.875rem;
height: 1.875rem;
border-radius: 1.875rem;
background: #fff;
transition: left .25s;
}
.btn-toggle.btn-lg.active {
transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
left: 2.8125rem;
transition: left .25s;
}
.btn-toggle.btn-lg.active:before {
opacity: .5;
}
.btn-toggle.btn-lg.active:after {
opacity: 1;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48736770
复制相关文章
相似问题
腾讯云开发者
