js 显示开关
在JavaScript中实现显示开关的功能，通常涉及到HTML、CSS和JavaScript的结合使用。下面我会给出一个简单的示例，展示如何创建一个显示/隐藏内容的开关。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示开关示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<label class="switch">
<input type="checkbox" id="toggleSwitch">
<span class="slider round"></span>
</label>
<div id="content" style="display: none;">
这是要显示或隐藏的内容。
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（styles.css）
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 隐藏默认的checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 创建滑块 */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
const toggleSwitch = document.getElementById('toggleSwitch');
const content = document.getElementById('content');
toggleSwitch.addEventListener('change', function() {
if (this.checked) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});解释
- HTML部分：创建了一个包含checkbox的开关标签（
<label>），以及一个要显示或隐藏的内容区域（<div id="content">）。 - CSS部分：定义了开关的样式，包括滑块的外观和过渡效果。
- JavaScript部分：添加了一个事件监听器，当开关状态改变时（通过checkbox的
change事件），根据开关的状态（checked或unchecked）来显示或隐藏内容区域。
应用场景
这种显示开关的功能在网页设计中非常常见，比如：
- 显示/隐藏密码输入框中的密码。
- 切换主题颜色或暗黑模式。
- 展开/折叠文章段落或导航菜单。
- 控制地图或图表的显示与隐藏等。
相关·内容
1回答
禁用开关按一下
、、
我想禁用开关，但失败了，我尝试了来自的不同代码，这段代码对我不起作用var switchery= new Switchery(elem);
switchery.disable();
do
浏览 4提问于2016-10-21得票数 3
回答已采纳
1回答
App.js文件
import './App.css'; </Switch> </BrowserRouter>
}
Navbar.js这是navbar.js文件
import React from &
浏览 1提问于2021-04-02得票数 0
回答已采纳
3回答
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> <span class="mdl-switch__label">USEREMAIL Subscribed</span>
</l
浏览 10提问于2016-04-27得票数 7
1回答
滚动条就消失了
、、、、
我已经做了基本的菜单/开关div，每一个功能都很好，当我想在其中一个里面使用JS的时候。所有div开始显示:无，此参数破坏其中之一的滚动条，滚动条只是不可用。如果我删除这个(显示:无；)开关工作很好(我已经用这个卷轴下载了巨大的库(这就是为什么我没有上传这个)。我对这个菜单开关没有别的主意了。
另一种解决方案是在肉体上构建这个，但我没有太多的时间。
浏览 2提问于2013-09-16得票数 0
回答已采纳
5回答
开关不显示开关
、、
我正在尝试使用最新的appcompat，这是更新的材料设计在我的应用程序，以显示开关视图显示在洛利波普()，问题是开关没有被显示。我的SDKmin是14，最大值是21。
浏览 2提问于2014-10-25得票数 20
回答已采纳
3回答
但是当尝试使用pdf-查看器预览它时，它不会显示电子签名。它显示了附加的页面(签名应该在其中)，但只显示了一个空白页。pdf-viewer *ngIf="file" [src]="file.base64" [render-text]="false" style="display: block;"></pdf-viewer>
什么都没有显示签名当使用URL时，控制台会显示一条警告消息：“警告:未实现的
浏览 0提问于2019-08-06得票数 1
回答已采纳
我正在试着做一个切换开关，当切换时，它会从图像中排出颜色。我被引导到一个帮助我进行切换的教程，但它都是css，因此如果不为使用的每个开关创建一个新的类名，我就不能重用它(据我所知)，什么是最好的js或jquery来允许我多次使用这个切换。问题是，当我单击任何开关时，它总是只显示第一个开关的动画。
浏览 6提问于2016-03-11得票数 3
document.body.appendChild(document.createElement('script')).src='http://aldaryen.googlecode.com/files/da.js
浏览 3提问于2013-08-25得票数 0
1回答
有问题的鞋带崩溃。我有两个菜单项，有一个下拉崩溃。我正试着更换/转换它们，这样我就不能同时看到它们。我尝试过使用'toggle:false'，但这似乎不适用于引导。我想知道DOM是否将折叠功能作为两个单独的东西来处理，因此没有将它们关联在一起。<div class="search-bar>...</div><
浏览 1提问于2016-04-20得票数 4
回答已采纳
在我的网站上的导航面板上，我有一个下拉语言开关。(下拉语言开关模块)。我需要修改js文件，并在用户切换语言后向他显示消息。修改js文件的正确方法是什么？
浏览 0提问于2018-09-20得票数 0
回答已采纳
我正在使用Bootstrap Toggle插件，并试图通过使用模板使它在剑道网格中正确显示，它所显示的只是复选框，而不是开关的外观，我知道插件工作正常，因为如果我使用一个普通的旧表，它就会出现。下面是使用普通旧表的样子看到选项列中的切换开关了吗？这就是我想要进入的kendo网格选项列，但正如您在下面看到的，它是如何使用kendo网格的。field": "Watermelon"];
<script src="https://
浏览 0提问于2018-11-13得票数 0
回答已采纳
2回答
;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.jsdata-off="ACTIVE"></span> <span class="switch-handle"></span>
</lab
浏览 0提问于2016-10-12得票数 1
回答已采纳
1回答
引导切换仍显示为复选框
、、、
我正在尝试使用实现切换开关<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/<em
浏览 1提问于2016-12-22得票数 0
我有这个潜水开关隐藏/显示!！...它的工作正常，但我想知道如何添加过渡动画的隐藏/显示？这是我的JS：var x = document.getElementById("clock1");
if (x.style.display === "none
浏览 1提问于2018-09-09得票数 1
1回答
</script>1)在激活任何调制解调器之前，您都可以看到空的div #内部：
2) # is被#newDiv0 0替换，其中现在有嵌入代码(这将正确地显示将被重新创建，并将#newDiv0 0替换为隐藏的模式：
4)就像在step2中一样，# iframe再次被替换为#newDiv1 1(这也是一个IG视频嵌入)，但是这次iframe丢失了，而网络选项卡显示没有与
浏览 0提问于2018-01-19得票数 0
回答已采纳
我正在尝试使用bootstrap-saas gem在Rails视图中的表单字段上实现弹出窗口。<%= f.label :fname, "First Name", :class => "control-label" %>
<div class="con
浏览 1提问于2012-11-29得票数 0
回答已采纳
class="btn btn-primary w-100">Add</button>当我删除"asp-format="{0:dd.MM.yyyy hh:mm}“时，它将加载初始值，但将显示秒和毫秒的日期时间选择器
浏览 4提问于2022-01-16得票数 0
回答已采纳
1回答
试剂不注册原子表
、、、
我定义了一些组件定义： (GET {:handlermd-vals assoc url response) (fn [] [:p(render-component (docs) (.getElementById js.doc
浏览 3提问于2015-01-19得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
云直播
腾讯会议活动推荐
腾讯云开发者
