开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js点击图标显示隐藏与更换图标

基础概念

在JavaScript中，点击图标显示隐藏元素并更换图标的功能通常涉及到DOM操作和事件监听。主要步骤包括：

获取元素：使用document.getElementById或其他选择器方法获取需要操作的元素。
添加事件监听：使用addEventListener方法为图标添加点击事件。
切换显示状态：通过修改元素的style.display属性来控制元素的显示和隐藏。
更换图标：通过修改图标的src属性或类名来更换图标。

相关优势

用户体验：用户可以通过简单的点击操作来切换内容的显示和隐藏，提升交互体验。
动态内容：可以根据用户的操作动态显示或隐藏内容，使页面更加灵活和个性化。
减少页面加载：通过隐藏不需要立即显示的内容，可以减少初始页面加载的数据量。

类型与应用场景

类型：这种功能通常用于侧边栏菜单、折叠面板、工具提示等。
应用场景：
- 导航菜单：点击菜单项展开子菜单。
- 详细信息展示：点击“查看详情”按钮显示更多信息。
- 设置面板：点击设置图标展开设置选项。

示例代码

以下是一个简单的示例，展示了如何实现点击图标显示隐藏内容并更换图标的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Icon Example</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <button id="toggleButton" onclick="toggleContent()">
        <img id="icon" src="icon-collapse.png" alt="Toggle Icon">
    </button>
    <div id="content" class="hidden">
        This is the hidden content.
    </div>

    <script>
        function toggleContent() {
            const content = document.getElementById('content');
            const icon = document.getElementById('icon');

            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                icon.src = 'icon-expand.png';
            } else {
                content.classList.add('hidden');
                icon.src = 'icon-collapse.png';
            }
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

图标不更换：
- 原因：可能是src属性路径错误或图标文件不存在。
- 解决方法：检查图标文件路径是否正确，并确保文件存在。

内容不显示或隐藏：
- 原因：可能是CSS类名错误或JavaScript逻辑错误。
- 解决方法：检查CSS类名是否正确，并确保JavaScript逻辑无误。
事件监听未生效：
- 原因：可能是事件监听器未正确绑定或元素ID错误。
- 解决方法：确保元素ID正确，并检查事件监听器是否正确绑定。

通过以上步骤和示例代码，可以实现一个简单的点击图标显示隐藏内容并更换图标的功能。如果遇到具体问题，可以根据上述解决方法进行排查和修复。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

win11系统托盘（右下角）图标显示隐藏解决办法

使用windows 11时，发现系统托图图标折叠隐藏起来，每次打开都需要频繁点击箭头，折叠打开对应图标，很多不会的小伙伴经常咨询如何解决？...遇到这种情况，很多有可能是使用第3方软件优化所至或者是使用了改良版系统，在这里分享日常碰到的问题，帮助您恢复图标。...解决方法：鼠标放至桌面任务栏右侧，右击“任务栏设置”，进入“个性化>任务栏”，中部点击“其他系统托盘图标”，展开即可以每个软件图标隐藏和打开的状态，点击需要打开或隐藏的图标就可以了。

6.9K2 0

调整Xiuno列表翻页显示数，上下页更换Font Awesome图标 PHP 函数 XiunoBBS

群友需要，调整了下列表翻页显示数，和上下页图标部分浏览器显示不了和显示难看的问题，下面效果图；修改前： image.png 修改后： image.png 直接下载附件替换路径：/www/xiunophp

9812 0

ubuntu桌面主题更换_ubuntu18主题美化

，如下图所示，如果不是，就更换当前的桌面环境，更换方法可以看这篇博文： https://blog.csdn.net/ksws0292756/article/details/79936965 ##1....install gnome-shell-extensions 在下面的网站中，找到你想要的主题，这里我以我自己的Flat Remix主题为例 https://www.gnome-look.org/ 点击右边的下载链接...，下载好以后，将其解压，然后，将解压出来的文件夹放到~/.themes目录中，如果没有“.themes”文件夹，就自己创建一个，注意，创建的前缀为“.”的文件夹，默认是隐藏的，这时按“Ctrl+h”...组合键就可以显示隐藏文件夹，放置好以后，重新启动tweak tool，在Appeareance选项中，选择你想要的Shell theme即可，如下图此时，再按“Alt+F2”组合键，弹出命令窗口，输入...“r”，重启Gnome桌面环境，然后就可以看到已经成功更换主题了 ##2.图标和指针主题图标和指针的主题更换方式和上面一样，只不过下载并解压后的文件夹放置位置不同。

1.8K2 0

Win11关闭时间显示——强行修改右下角时间显示

Win11由于系统重新搞了一遍任务栏，所以无法直接关闭时间的图标显示了。我们只能通过修改系统设置，实现隐藏或关闭windows11任务栏上显示的时间和日期。...目录操作步骤 1、打开操作面板 2、选择【大图标】->【区域】 3、点击其它设置 4、选择【时间】选项卡 5、选择【日期】选项卡 ---- 操作步骤 1、打开操作面板 2、选择【大图标】->【区域】...3、点击其它设置 4、选择【时间】选项卡这里我们能看到时间的格式是：【H:mm:ss】这样显示的，但是我们来看看右下角的事件显示。...这里我们能看到并没有显示秒这个单位，那么我们就能利用这个方式来强行更换一下，时间格式改为【s】，小s代表秒数，秒不显示，故而符合规格但是不显示时间。点击应用后我们来看看效果。...那么还有日期显示，我们来试试： 5、选择【日期】选项卡这里直接切换选项卡即可。我们来看看效果：就剩下了一个【2】，代表日期。我们到这里就只能看到一个字符，但是这里就无法进行彻底的隐藏了。

8K4 0

红队技巧-网络钓鱼

这里制作也挺简单的，只需要更换一个图标就行，这里先用cs随便生成一个exe ?...然后我把显示已知的文件扩展名关掉首先把exe文件拖到resource hacker里，成功后面显示文件名，然后点击增加一个资源 ? ? 然后选择ico图标 ? 然后点击保存即可 ? 那么就成了鸭！...点击高级，自解压选项，常规，设置自解压路径 ? 点击设置，设置解压后运行文件的路径 ? 模式选择全部隐藏 ? 更新设置成覆盖所有文件，保证二次自解压不报错，不会引起怀疑 ?...然后修改文件名和图标进行伪装就欧克了 6.word宏钓鱼新建一个word，打开，然后点击视图，宏，查看宏，选择当前文档，点击创建 ? 然后cs生成宏代码，复制粘贴进去 ? 然后另存为docm文档？...那么点击启用宏，图片就好消失，显示出正常的文件来。

3K1 0

点击按钮平移隐藏与显示div（使用translate）

-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> js doesn't work if you view the page via file:// --> js/bootstrap.min.js">js doesn't work if you view the page via file:// --> js/bootstrap.min.js"></script

4.9K2 0

BitDock：为Windows桌面带来Mac风格的桌面美化工具

自定义图标与主题：软件提供多套风格各异的图标集供用户选择，用户可以根据个人喜好自由更换Dock图标样式，甚至自定义图标，使桌面更加个性化。...定时切换与智能隐藏：为了保持桌面的整洁，BitDock允许设置Dock栏的自动隐藏与显示，以及根据时间或活动状态自动切换主题，让桌面既美观又实用。...3.5、【图标与任务管理，尽在掌握】BitDock以直观的交互逻辑，让图标管理与任务操控变得简单直观。仅凭鼠标拖拽，即可轻松添加、重新排列或移除图标，实现桌面的整洁有序。...同时，通过直观的点击操作，实时查看并管理运行中的程序，无论是快速切换还是优雅结束进程，都游刃有余，效率倍增。...图标整理：合理安排Dock栏图标顺序，将同类应用归类放置，提高查找效率。个性化设置：利用自定义图标和主题功能，定期更换Dock风格，保持新鲜感。

4772 0

【Html.js——Bug修复】大电影（蓝桥杯真题-2333）【合集】

点击收藏图标后，仅在收藏图标为实心图形时，成功提示框（class=toast__container）元素显示，2 秒后该提示框自动隐藏或者点击提示框上面的关闭按钮（class=toast__close）...如果是空心图标，将图标的 src 属性值修改为实心图标的路径，显示提示框（将提示框的 display 属性设置为 block），并设置一个 2 秒的定时器，2 秒后隐藏提示框（将提示框的 display...如果不是空心图标（即为实心图标），将图标的 src 属性值修改为空心图标的路径，并隐藏提示框。 3....页面渲染电影卡片、浮动操作按钮和隐藏的提示框。 JavaScript 代码为每个电影卡片添加 5 颗星星。用户点击收藏图标，触发收藏图标点击事件处理函数：判断图标状态，切换图标样式。...如果是从空心到实心，显示提示框并设置定时器自动隐藏。如果是从实心到空心，直接隐藏提示框。用户点击提示框关闭按钮，触发关闭按钮点击事件处理函数，隐藏提示框。测试结果

1880 0

1分钟教会你：DIY一个U盘图标及U盘文件夹图标

，与logo.ico 防止误删嘛，还能一定程度上防止U盘被感染。...（更换设备后隐藏无效）U盘内文件夹图标修改：这里跟上述U盘图标更改有些许不同首先，新建一个文件夹（我图中以docker笔记文件夹做演示）。提前做好一个ico图标，放于该文件夹目录下。...右键该文件夹，属性，自定义选项卡，更改自定义图标，选中文件夹下的图标打开，并点击确认即可：如此，我们就修改完成。...总所周知，U盘在不同电脑上，显示的盘符可能不同，比如你电脑上是G盘，别人电脑可能是H盘这就会导致U盘引用的图标，无法读取。...H +S +A docker.ico这里需要注意的是，这里的隐藏，你是无法通过更改文件夹选项中的显示隐藏文件看到的。

5221 0

【Windows逗你玩】桌面图标神秘隐身？速解图标变白强迫症急救指南

方法一：删除图片缓存点击“Win+R”，输入“%localappdata%”，点击“确定” 点击“查看”，勾选“隐藏的项目” 找到”IconCache.db“这个文件，它就是图标缓存文件，删除它重启电脑...，图标即可恢复正常方法二：修改显示缩放比例右键点击桌面空白处，点击“显示设置” 修改原本缩放比率，从100%变为125%（反正跟原来比率不一样就行，自己灵活处理）注销重启重新进入系统，右键点击桌面空白处...，点击“屏幕设置”，将屏幕比率修改为原来的比率注销重启，然后就搞定了方法三：更改图标右键点击图标，进入属性界面，选择“更改图标”，选择自己想改成的图标扩展知识： Windows系统中的图标（Icons...显示原理图标显示涉及到图形渲染引擎，它根据当前的主题、颜色配置和DPI设置来决定如何渲染图标。例如，高DPI显示器上，系统会自动使用高分辨率图标以保证清晰度。...主题和自定义 Windows允许用户通过更换主题来改变图标样式，这是通过替换系统图标资源实现的。此外，开发者也可以为自己的应用程序设计特定的图标，以符合应用的品牌形象或功能指示。

8911 0

Bootstrap 响应式框架第三集

文件 1、html5shiv.min.js 2、respond.min.js 6、两个行为依赖JS文件 1、jquery.js 2...) 在sm中占6列的宽(1行中能显示2列) 在md中占3列的宽(1行中能显示4列) 4、指定列在特定屏幕下隐藏 .hidden-lg : 在 lg...屏幕下隐藏 .hidden-md : 在 md 屏幕下隐藏 .hidden-sm : 在 sm 屏幕下隐藏 .hidden-xs : 在 xs 屏幕下隐藏... 3、实现点击切换效果 4、组件 - 图标字体(glyphicon) 在页面中...，显示为图标，但本质是文字。

4.2K3 0

用 Electron 将 UniApp 封装为 EXE 指南

与 UniApp 结合性：可以将 UniApp 项目的 H5 版本嵌入 Electron，轻松实现功能扩展。...// 如果不想让鼠标点击窗口顶部区域时自动显示菜单栏，可以加上下面的代码 // hideMenuBar: true, }); // 加载 UniApp 打包后的文件 mainWindow.loadFile...：在 Electron 中更换应用程序的图标非常简单。...更换应用程序图标（Windows）在 Windows 系统中，图标通常使用 .ico 格式。你可以在创建 BrowserWindow 或 app 时指定图标路径。...更换打包后的应用程序图标如果你打包应用程序后，还想更换最终生成的安装包图标，你需要在打包配置中指定图标。这里以 Electron Builder 和 Electron Packager 为例。

4281 0

【转】 Android是怎么样启动应用程序的，从点击启动图标到显示视图到底做了什么操作

转载自 https://juejin.im/post/5b0d0a0cf265da091f105858 本文阐述了用户点击启动图标后，Android 系统是怎么启动你的应用程序，将应用视图显示在移动设备上...所以当在桌面点击启动 logo 就会通过 binder接口以ipc的形式，通知 ams 会发起一个startactivity 然后通过 packagemanager.resolveIntent 来获取...最后视图显示在手机上。如图： ?

1.1K6 0

后视镜加热按键图标_js点击按钮弹出图片

如何给自己的网站添加方便快捷的“返回顶部”小图标按钮呢？...如下图： JS源代码： /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ function...代码有不理解的地方可以通过留言与博主交流！

29.3K2 0

【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

// 更换显示密码的图标为“打开眼睛”的图标 show_password.src = 'images/open.png'; // 更新标志位...，表示密码现在是显示状态 flag = 1; } else { // 如果密码是显示状态 , 点击按钮隐藏密码...// 将密码字段的类型重新设置为密码，隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“...// 更换显示密码的图标为“打开眼睛”的图标 show_password.src = 'images/open.png'; // 更新标志位...// 将密码字段的类型重新设置为密码，隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“

3381 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...document.getElementById("d").style.display = ""; // 显示盒子的方法方式二 visibility属性可以控制div的显示和隐藏，但是隐藏后页面显示空白...通过attr设置属性 $(“#id”).attr(“style”,“display:none;”);//隐藏div $(“#id”).attr(“style”,“display:block;”);//显示...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1.3K0 0

如何在js中将统计代码图标隐藏

将统计代码写进常用的js文件中。　　将统计代码写进js中，只要每个页面有调用这个js，那这些页面都会被记录。...可有些统计都会在页面上留个小图标，对于有“强迫症”的人来说是致命的，直接在html中用display none来隐藏掉。如何在js中将统计代码隐藏呢？...以51统计为例，他提供了可至于js文件中的代码 ?....51.la/***.js">'); 　　如果cnzz或其他没有提供可至于js文件中的代码，可以先将普通html的代码转换成js的代码，也就是...，type="hidden"，测试可行，不用　　怎么样，修改js文件后统计代码图标是不是被隐藏了呢？

14K7 0

显示隐藏切换同时变化文字jquery与js实现

;}); $(".fixed-table-container").css("padding-bottom","40px"); }) }) 第二种方法js...oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; //这个地方显示... oDiv2.style.display = 'none'; oDiv1.style.display = 'block'; //这个地方显示

8.4K3 0

解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"> 含有data-show-columns="true"属性时会在右边显示可以切换列的按钮...结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns...的html片段，我们只需保留最后一个，解决方法 1、先删除多余的html 2、执行表格对齐函数为了使排序的图标正常显示，需要在onSort的事件中执行能使图标正常显示的代码（注意如果要使固定的列有排序的功能请看我另一篇博客...#tableTest1').bootstrapTable('resetView'); fixleftwidth() }); }); //格式化显示

6.1K4 0

vista怎么用_电脑系统vista

右键点击“我的电脑”－>管理，在“计算机管理”对话框中点击“服务与应用程序”->“服务”，找到“Security Center”右键点击－>“属性”，启动类型选择“已禁用”，再点击停止按钮，此时白色交叉的红色盾牌就会消失...6、显示Windows Vista中的系统文件和隐藏文件出于保护系统文件的考虑，Windows Vista与之前的Windows XP一样，默认不显示系统文件和隐藏文件。...但当高级用户需要对系统文件和隐藏进行操作的时候，就必须显示系统文件和隐藏文件了。...1、点击“计算机”图标，进入Windows资源管理器； 2、点击工具栏上的“组织”标签，在弹出的下拉菜单中点击“文件夹和搜索选项”； 3、在出现的“文件夹选项”窗口中，点击“查看”标签； 4、如图所示...，将“隐藏受保护的操作系统文件（推荐）”前的单选框取消选中，将“显示隐藏的文件和文件夹”前的复选框选中； 5、点击“确定”后退出。

4.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭