开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我想设置这个图标，如果用户想要标记这一章，因为它将阅读点击此图标，所以它会改变到另一个图标

您可以使用前端开发技术来实现这个功能。以下是一个可能的解决方案：

首先，您需要在前端页面中插入一个图标，并为其添加一个点击事件监听器。

<!DOCTYPE html>
<html>
<head>
  <title>标记章节</title>
  <style>
    .icon {
      width: 50px;
      height: 50px;
      background-image: url('path/to/icon.png');
      background-size: cover;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="icon" id="bookmark"></div>

  <script>
    const bookmarkIcon = document.getElementById('bookmark');
    bookmarkIcon.addEventListener('click', toggleBookmark);

    function toggleBookmark() {
      // 在这里添加逻辑来切换图标状态
      bookmarkIcon.style.backgroundImage = "url('path/to/another_icon.png')";
    }
  </script>
</body>
</html>

在上述代码中，我们创建了一个具有指定样式的图标，并为其添加了一个点击事件监听器。当用户点击图标时，将调用toggleBookmark函数。
在toggleBookmark函数中，您可以添加逻辑来切换图标的状态。例如，您可以使用CSS的backgroundImage属性来更改图标的背景图片，从而实现图标的变化。

这只是一个简单的示例，您可以根据自己的需求进行扩展和定制。希望对您有所帮助！

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

有帮助

没帮助

相关·内容

在 HTML 中包含资源的新思路

例如，我经常希望向页面添加额外的 HTML，或者嵌入 SVG 文件的内容，以便我们可以为其设置动画和样式。...本周我在思考如何用一些新的与 fetch 相关的标记模式来实现这一点，例如 rel="preload" 或 HTML import，但我总是得出的相同结论，即这些都不能使你方便地访问所取得的文件的内容。...然后我想，假设浏览器允许我在父文档中检索 iframe 的内容，也许一个旧的 iframe 可能是一个很不错的模式。事实证明，它肯定会的！...).children[0]);this.remove()"> 尽管此标记以 iframe 开头，但如果你使用开发人员工具检查上面的图形，将会看到 SVG 的图标标记，就内嵌在 HTML...所以该片段会试图获取 iframe 的 body 元素（如果存在），如果不存在，它将会用于整个文档。

3.1K3 0

如何像黑客军团主角那样将文件隐藏在音频中

Robot）一直是我最喜欢的电视剧，演员Rami Malek所扮演的有社交焦虑症，游离于肤浅而物质的社会之边缘却又想让世界更美好的年轻人这一角色让我印象很深，不过我喜欢这部电视剧并不是因为我想要像主角Elliot...左边的文件是我的“载体”音频文件，也就是说，我会用这个音频文件隐藏我的数据。第三步：设置点击顶部栏上的设置图标，它就会弹出一个如下所示的窗口。...接下来，点击顶部栏上的“Add files（添加文件）”图标。这将提示你添加要隐藏的音频文件中的文件。在这里，我有一个名为Shayla.doc的文件，我想隐藏在Nora Jones音频文件中。 ?...第五步：编码当我点击Shayla.doc时，它会被添加到右边的窗口。现在，我们需要点击顶部图标栏上的“encode（编码）”图标。 ?...最重要的是这个音频文件的外观和声音像普通的音频文件一样，如果任何人想要得到隐藏在其中的信息，他们将需要使用仅为我所知的密码来解密它。

1K4 0

如何像黑客军团主角那样将文件隐藏在音频中

Robot）一直是我最喜欢的电视剧，演员Rami Malek所扮演的有社交焦虑症，游离于肤浅而物质的社会之边缘却又想让世界更美好的年轻人这一角色让我印象很深，不过我喜欢这部电视剧并不是因为我想要像主角Elliot...左边的文件是我的“载体”音频文件，也就是说，我会用这个音频文件隐藏我的数据。第三步：设置点击顶部栏上的设置图标，它就会弹出一个如下所示的窗口。...接下来，点击顶部栏上的“Add files（添加文件）”图标。这将提示你添加要隐藏的音频文件中的文件。在这里，我有一个名为Shayla.doc的文件，我想隐藏在Nora Jones音频文件中。 ?...第五步：编码当我点击Shayla.doc时，它会被添加到右边的窗口。现在，我们需要点击顶部图标栏上的“encode（编码）”图标。 ?...最重要的是这个音频文件的外观和声音像普通的音频文件一样，如果任何人想要得到隐藏在其中的信息，他们将需要使用仅为我所知的密码来解密它。

1.1K8 0

【STM32H7教程】第7章 STM32H7下载和调试方法（IAR8）

第5个图标是Step Into（Step into the current step point），单步调试，每次点击运行一行代码，所以只要有子函数就会进入。 ...第8个图标是Run to Cursor（Execute to the current cursor position），直接运行到用户设置的行，设置方法比较简单，用户仅需在那行使用鼠标左键点击一下，可以看到前面有光标即可...（注意，程序不能倒着执行，也就是能往回设置）然后点击此图标即可，可以看到前面多了一个绿色的小箭头，说明已经运行到此行第9个图标是全速运行。 ...，如果大家想让程序在指定的位置停止运行，可以添加断点，通过这个小红点来添加（注意，取消断点也是用的这个图标）。...用户仅需在那行使用鼠标左键点击一下，然后单击断点图标即可，断点设置好的效果如下：然后点击全速运行，如果程序有执行到这个地方，就会停在这里。

1.3K2 0

如何为Ubuntu Dock图标启用最小化点击功能？

当你在Dock上点击应用程序的图标时，会发生以下一个操作: 如果应用程序尚未运行，则将打开相应的应用程序。如果相应的应用程序已经运行，它将成为焦点。如果各自的应用程序已经处于焦点，则不会最小化。...我已经习惯了这个特性，我想让它回到我的Ubuntu 18.04桌面。如果你想在你的Ubuntu Dock上启用这个功能，请遵循下面的步骤。...为Ubuntu Dock图标启用最小化点击功能我们可以通过几种方式做到这一点。以下是Ubuntu 18.04.2 LTS桌面上的两种测试方法。...您只需复制/粘贴以下命令即可立即启用此功能。启用此功能后，单击正在运行的应用程序的图标，它将立即最小化以停靠。...如下图：只要点击任何一个窗口，就可以把它打开。这是我喜欢的方式。

1.6K1 0

为啥你的UI界面感觉乱？这7个常见问题一定要避免

01.忽略内容而设计如果您想提高自己的技能，请设计一些可能成为产品最终目标的产品。它将实际显示哪些图像，标题有多长？因为，一旦您将真实的内容填满你的设计稿，您的精美设计就会变的异常难看。...但是，如果您有多于五行的文本，并且需要全部显示而没有省略号，则必须用另一种视觉解决方案。为什么呢？因为手机阅读者没有阅读较长的文本的习惯。此时，可以使用水平滚动或者两列布局的图片列表。 ?...假设用户尝试以随机顺序填写表格。当第一个必填字段失去焦点状态时，它将返回错误：“请填写此字段。这是必需的！” ‍ 我们可怜的用户大声说：“等等，我只是在表单字段之间单击，甚至没有单击'提交'！”...但是，如果您是UI设计的初学者，我认为有必要在打破规则之前首先学习这些规则。 ‍ 适当的填充和间距可使布局看起来整洁有序，同时使读者更容易阅读和理解信息。 ‍...此外，还有很多免费的图标，人们可以立即识别出来。为什么？他们已经看到它们到处都在使用。 ? 07.注意点击区域触摸区域太小会让用户抓狂，因为它们会使用户难以完成所需的动作。

1.3K4 0

泛在可用媒体播放器

瞬时按钮在播放器中，当你向前或向后搜索时，它们是瞬时按钮，因为你点击它们，一个动作发生，再次点击它们，同样的动作发生。...因此，如果你把播放和暂停作为一个具体的例子来看这些图标，你会看到的不是按钮代表按下或未按下的东西，而是一个变化的图标，这意味着将要采取的行动正在变化，并由该图标代表。...例如，当按钮有播放图标时，如果我按下它，这意味着它将播放视频。然后显示暂停按钮图标。如果我按下它，它将暂停视频。...所以，在这种情况下，我们想把它也表示为一个按钮，但在这里，我们希望它仍然使用动词，就像我们对一个瞬间按钮，但不是一个动词，它将以一种与所表示的图标对应的方式改变。...之所以这么做是因为用户，尤其是没有视力的用户可能不知道他们的视频停止发声的原因。许多播放器无法向用户指示播放器正在后台加载。

1.2K1 0

这15个HTMLCSS错误我不信你没犯过(网站规范)

但屏幕阅读器的用户在这种情况下无法填充字段，因为屏幕读取器无法从占位符属性读取文本。因此，我建议使用字段名称的标签元素和占位符属性作为用户需要填写的数据示例。...例如，他们使用 img 元素标记社交图标。但是社交图标是一个装饰图标，它可以帮助用户更快地理解元素的含义，而无需阅读文本。如果我们删除图标，我们不会失去元素的含义，因此我们可以使用背景图像属性。...如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。...可能是地铁、大自然或者别的国家我认为我们必须帮助用户使用我们的应用程序。好主意是帮助浏览器不加载沉重的图像与手机或其他移动设备。我想分享的解决方案，将做到这一点。...然后浏览器将选择最适合用户的图像。注意，我使用移动第一的方法，所以如果图片没有浏览器支持或用户使用手机来显示小图像。

3.3K3 1

docker 单机配置redis主从集群集群前置准备

如果你还不够了解，就阅读正文的相应章节。...了解docker image和container 这一章没有什么可讲的，关于镜像和容器的拉取、删除等操作，可自行查阅，无需赘谈。...但有时候，我们想对容器的数据进行持久化，甚至想要将其迁移到其它容器内。比如，将一个容器内的数据库进行备份，复制到另一个机器，挂载到容器中使用，就要使用持久化了。...操作如下：右键docker图标->settings->shared drives->在d盘处打钩->点击apply docker可能会请求操作d盘的权限，之后需要你输入账户密码(如果没有就设置一个...在主从配置中，需要自己定义redis.conf来配置，所以官网的这一条命令会有用： docker run -v /myredis/conf/redis.conf:/usr/local/etc/redis

1.2K4 0

教你在Tableau中绘制蝌蚪图等带有空心圆的图表（多链接）

它需要两个轴，一个轴作为点，另一个轴作为线来连接点。消除一个点是很简单的：用一个简单的计算来检查时间，如果时间等于当前的时间，则让其对应的值等于你的测量值，否则使对应值等于“NULL”。...JPG的问题是无法设置透明背景，所以你最后得到的是纯色方块，而不是圆形。此外，即使可以设置透明背景，将创建的不同颜色的自定义图形与背景颜色匹配也会十分麻烦。...但这并不容易，因为缩短的量需要取决于蝌蚪图的走向，所以正数和负数都有可能。此外，对线进行加减的数量取决于圆的大小和线的长短：随着圆圈变大就需要减去更多的线。...以下是Mark的工作簿中建立蝌蚪图的步骤：移动序列到行移动销售线到列移动销售圈到列右键点击销售圈并选择“双轴” 右键点击第二个y轴并选择“同步轴” 选择所有的标记卡，并移动类别到颜色在销售线标记卡上...右键点击总和（销售线）并选择‘移除’或将此栏拖到画面左侧右键点击总和（记录数量）并选择‘移除’或将此栏拖到画面左侧在测量值标记卡上：从标记卡的下拉目录中选择“圆圈”，移动测量名称到尺寸，选择细节图标到测量名称的左侧并改变其颜色

8.4K5 0

0624-6.2.0-NiFi处理器介绍与实操

GetFile处理器的描述告诉我们它将数据从本地磁盘拉入NiFi，然后删除本地文件。然后我们可以双击处理器，或者单击选择它，然后点击“Add”按钮，这样处理器就会被添加到画布中。...如果不确定特定属性的作用，我们可以将鼠标悬停在属性名称旁边的“帮助”（ ? ）图标上，以便阅读该属性的描述。此外，将鼠标悬停在“帮助”图标上时提示将提供该属性的默认值（如果存在）。 ?...4.为了解决这个问题，让我们按照上面的相同步骤添加另一个可以连接GetFile处理器的处理器。但是，这一次，我们只需记录FlowFile存在的属性。...因为GetFile只有一个关系，success，它会自动为我们选择。 7.单击“Settings ”选项卡提供了一些用于配置此连接的行为方式的选项： ?...8.我们可以给这个Connection取一个名字，否则，连接名称会基于所选的Relationships。我们还可以设置数据的到期时间。默认情况下，它设置为“0秒”，表示数据永不过期。

2.4K3 0

18个您想了解的微小但有用的macOS功能

您可以将工具栏设置为仅显示文本，或者同时显示图标和文本来显示快捷方式，以使视觉清晰。右键单击工具栏以显示这些选项。想要更好的选择吗？使用自定义图标添加到工具栏的文件和文件夹。...如果此快捷方式不适合您，请检查是否已将macOS设置为使用F1，F2等作为标准功能键。（在“系统偏好设置”>“键盘”>“键盘”下查看。）如果有，您可以跳过Fn键，而只击F5键。...点击与您要输入的标记相对应的数字。此技巧仅适用于带有重音符号的字母键。对于您经常使用的其他特殊字符，请在“系统偏好设置”>“键盘”>“文本”下设置文本扩展快捷方式。我为卢比符号创建了一个。...12.在文本中插入Apple图标您可能不需要经常输入Apple徽标（如果有的话），但无论如何，我还是在这里包括此快捷方式，因为它很酷。...18.从任何窗格查看所有系统偏好设置如果每次要切换到其他窗格时都使用“显示全部”按钮还原到“系统偏好设置”的主视图，则需要此设置。无需单击该按钮，而是单击并按住以显示带有所有可用首选项窗格的菜单。

6.1K3 0

实心图标与空心图标的区别

我仔细翻阅了这个实验的所有资料和参考文献，并对这名设计师提出的很多参考做了阅读，过程中，我发现这个实验有一个细节问题。...所以情况可能是，用户在判断过程中，因为忘了这个图标所表达的意思，于是想了一下，那识别速度肯定就慢了，无论是实心还是空心。所以这个实验算不上很严谨。...所以用户在这层理解上，不会真正去思考它为什么是「发现」，而是直接通过以往对于它的理解，再通过识别位置来理解它里面有哪些功能，比如里面有「朋友圈」。接着通过变化来提示用户，比如从空心图标变到实心图标。...就好像在商场里，突然尿急，看到这样的厕所指示牌，你怎么想？我相信不管是男生还是女生，第一反应都是往右走吧？所以第二个结论是，实心图标比空心图标更有引导性。 03....装饰是给内容做装饰，而不是给自己做装饰，如果是给自己做装饰，那就没必要用线条来表现了。各位设计师应该懂我意思。

1151 0

使用 Python 和 Pygame 制作游戏：第一章到第五章

如果它必须为您想要设置的每个单个像素执行此操作，您的程序将运行得更慢。（根据我的快速测试，以这种方式绘制像素要慢两到三倍。）...它会看起来像这样：如果您更改窗口，使 3,0 为黑色，4,0 为白色，它会看起来像这样：对于用户来说，黑色像素看起来已经“移动”到了左边。...这也让未来阅读你代码的程序员说，“如果我看到一个列表值，我知道它可能在程序的某个时刻被修改。否则，编写这段代码的程序员会使用元组。”...如果执行进入了这个块，我们知道用户将鼠标光标放在了一个方块上（也许还点击了鼠标，这取决于mouseClicked中存储的值）。...如果用户点击的位置在空白处旁边，我们将使用应该滑动的值设置slideTo变量。

1.2K1 0

iOS 9人机界面指南（一）下篇：UI设计基础 - 腾讯ISUX

并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时，他们是想要使他们关注的内容更容易阅读；他们并不总是想要屏幕上的每个单词都更大。...如果您的应用新版包含用户一直期待的bug修复，那在你的软件描述中提到这一点就是个很好的做法。...无论是打开另一个文档或切换应用的时候，iOS应用都应当承担起帮助用户保存输入内容的责任。如果你的应用的主要功能不是创造内容，但又允许用户查看或编辑信息，这种情况下你需要询问用户是否要保存修改。...尽可能在主UI中提供设置选项。如果这个设置项代表着用户一个基本任务，又或者用户在进行主线任务时有可能频繁改变设置，那么将设置项放在主UI中会很方便。...尤其是，如果你要用一段文字来描述如何改变这个设置，比如“设置>隐私>定位服务”，倒不如直接放置一个按钮，点击后即可到达设置中的定位服务。

1.8K2 1

绝无仅有！2019年最全的UI设计之输入字段剖析

今天，我想谈谈UI设计中最常用的一个设计元素 - 输入字段。输入字段允许用户在UI中输入文本。它们通常出现在表单和对话框中。本文将为大家揭秘最佳的输入字段设计技巧以及元素，一起来看看吧。 ?...设置默认值最好避免静态默认值，除非你绝对确定你的大部分用户（比如说95％）会选择特定值。特别是如果来自该领域的信息对你很重要。为什么？因为人们快速扫描表单，许多人会忽略已经有值的字段。...此原则的唯一例外是智能默认值。智能默认设置可以使用户更快更准确地完成表单。例如，根据用户的地理位置数据预先选择用户的国家/地区。但是，你仍应谨慎使用这些，因为用户倾向于保留预先选择的字段。 5....关闭图标关闭图标是一个具有强大功能的小图标 - 它可以帮助降低交互成本。 '清晰'的关闭图标显示此图标可帮助用户在一次点击中删除字段中的文本。 ? 注意容器右侧的“交叉”图标。...当用户点击此图标时，输入将被删除 '交叉'或'检查'图标如果你使用内联验证，则可以使用关闭图标通知用户有效/无效输入。当用户提供不正确的信息时，你还可以显示错误消息。应在容器下方显示错误消息。

2.4K2 0

如何构建你的第一个 Vue.js 组件

图标是一个 Vue.js SFC，就像我们正在构建的这一个。如果你打开这个文件，你会发现它和我们的结构完全一样。 export default 模块将对象文字导出为我们组件的视图模型。...让我们设置一些初始的模拟状态，并调整模板，使其显示出来：我们在这里所做的是使用 Vue 的数据来设置组件状态。你在 data 中定义的每个属性都是有响应性的：如果它发生变化，它将反映在视图中。...如果你打开浏览器开发者工具栏中的 Vue 面板并选择组件，当你点击 star 时，你会看到数据的变化。这表明你的 star 属性是响应性的：当你改变它的时候，它会把它的改变指派给视图。...不过这个话题值得写一篇单独的文章。在这一点上，我们可以认为已完成 —— 但我们可以做更多的工作来改善用户体验。...现在，我们实际上不能给出 0 的等级，因为点击一个 star 会将它的比率设置为它的索引。更好的方案是重新点击同一颗 star，并切换至其当前状态，而不是保持 active 状态。

2.5K5 0

AngularDart Material Design 选择顶

请使用factoryrenderer，因为它会产生更多树形可动代码。...useCheckMarks bool 如果为true，则使用复选标记而不是复选框来指示是否为多选项目选择了该项目。此特定样式用于多选菜单项组的材料菜单下拉列表。...value dynamic 此选择项表示的值。如果对象实现HasUIDisplayName，则它将呈现使用uiDisplayName字段作为项的标签。...当弹出窗口中的另一个元素专注于打开时，应设置为false，例如一个搜索框。 options SelectionOptions 用于此选择模型的选项。...设置此按钮时，该按钮也会显示红色下划线。 icon Icon 与按钮一起使用的图标。（可选的） iconName String 用于按钮的图标。

6K2 0

iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

如果想自定义标签栏图标，请参考文档第五章中Bar Buttons Icons里给出的建议。...因为用户习惯了内置地图的各个标注的颜色，所以最好避免在你的应用中重新定义这些颜色的含义。...在这个场景下，最好不要在用户点击浮出层外的区域就关闭这个浮出层，因为这个时候让用户完成或者彻底放弃这个任务可能更为重要。...表格中的每项都指向承载于另一个列表中的不同子信息。用户可以沿着这些层级结构的路径来点击每一层列表中的项。以展开标志告知用户点击这一列中的任何位置，都将展开新的列表以展示其子类信息。...在点击后，用户期望出现新的视图，或者出现一个复选标记以表明先前点击的项已经被选中或激活。如果表格的内容庞大而且复杂，不要在所有数据都加载完之后才一起显示出来。

10.1K5 1

windows11修改用户名_win10家庭中文版怎么更改用户名

我在微信公众号【光阴似贱日月如琐】上更新了详细图文版，建议您阅读最新教程。在公众号上回复【修改用户名】即可获取！...四修改步骤（图文） 1.创建一个临时账户点击任务栏【开始】图标，点击【设置】，如图3 图3 点击【左上角头像】或【账户】，进入【账户】设置，选择【家庭和其他用户...如图4 图4 在【添加其他用户】栏，点击【添加账户】，如图5 图5 在打开的页面点击【我没有这个人的登录信息】。...看ProfileImagePath对应的值，在右侧数据栏看哪个值是自己想改的名字，然后双击，改成想改的名字。这里是我已经改好的【duan】。...我改之后并没有出现问题，出现问题的可以参考类似帖子解决。（blabla我感觉她再也不会修改用户名了）如果产生严重错误，使用提前创建的还原点，可以还原系统。

2.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭