HTML 使文本可点击,而不使其成为超链接

2024-03-28

我想添加这样的功能:可以选择单击某些 HTML 文本并执行正确的 JavaScript 代码。

我怎样才能做到这一点?


对于语义我会使用<button>像这样的元素:

<button class="link">Clicky</button>

要使按钮看起来像普通文本,您可以使用 CSS:

button.link { background:none; border:none; }

为了便于处理点击,我将使用 jQuery,如下所示:

$(".link").on("click", function(e) {
    // e is the event object
    // this is the button element
    // do stuff with them
});

不过,如果按钮上有 ID 属性,则可以使用纯 JS,如下所示:

var button = document.getElementById("your-button-id");
button.addEventListener("click", function(e) {
    // e is the event object
    // e.target is the button element
    // do stuff with them
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 使文本可点击,而不使其成为超链接 的相关文章

  • 当鼠标移动缓慢时,Bootstrap 4中的菜单消失

    我在跑这把小提琴 https jsfiddle net Chamster o23865p6 当鼠标指针从 开始 快速移动到展开的菜单时 一切都很好 然而 当移动速度较慢时 菜单会关闭 因为感觉就像鼠标左移 const menu li dro
  • Mongoose VersionError:保存文档时找不到 id 的匹配文档

    通过 sync API 请求同步用户购物车时 我反复看到以下错误 每当用户更改购物车的内容时就会调用此函数 VersionError 找不到 id 的匹配文档 2y4b1hq601cd013e0af25e32 版本4修改路径 购物车 car
  • 使用 window.print 内容将网页下载为 pdf

    我想要一个链接 当单击该链接时 会自动开始下载网页的可打印版本 我正在使用Moodle 我想要的内容是完全相同的如果我使用 ctrl p 下载页面并保存为 pdf 或使用 a href Download web page a 我正是想要该内
  • 直接加载页面到锚标记

    当我加载 URL 中带有哈希标记的页面时 页面会加载 然后跳转到锚标记 有没有什么方法可以防止这种 跳转 要么直接将页面加载到锚标记 要么至少使滚动平滑 我在 Chrome 和 Firefox 中看到这个问题 但在 IE 中没有 如果你仍然
  • Ace Editor 获取当前选定的行号和文本

    我目前正在使用 Ace Editor 但我在文档中找不到与检索当前所选行号及其文本相关的任何内容 有任何想法吗 首先 定义 选定行 ace 中的选择可以跨多行设置 如果您的意思是 未设置选择 当前行是光标闪烁的行 var currline
  • GWT 与 ScriptSharp 的优缺点 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何隐藏 webpack-dev-server 日志?

    一旦 webpack dev server 启动 控制台将输出 wds Project is running at https 127 0 0 1 3002 wds webpack output is served from wds Con
  • 如何获得日期为 yyyy-mm-dd 的年份差异?

    我想得到以 yyyy mm dd 格式给出的两个日期之间的差异 差异应该是年份 var ds 2002 09 23 var today date new Date alert today date Date prototype yyyymm
  • Angular:将数据从工厂 ajax 调用传递回我的控制器

    我一直在使用 Angular 并且已经从使用本地数据 似乎工作正常 转向尝试通过工厂中的 ajax 调用来填充我的视图 这是代码 div h2 Get data using a Factory h2 div div div
  • 在 Javascript 中获取类的所有实例

    我以为这个问题已经有了答案 但我似乎找不到答案 如何在 Javascript 中的此类的所有实例上运行特定的类方法 这必须在我不知道实例名称的情况下完成 我想我可以在类中使用某种静态变量来存储所有实例 但这在 JS 中似乎不存在 那么如何在
  • IE 中“对象不支持属性或方法‘查找’”

  • ASP.Net Web 应用程序 Jquery Photoviewer 和 Ajaxical 更新

    有一个错误我的网站 http new mnarfezhom com 请进入右数第三个菜单 有些图像只能通过 jquery photoviewer 显示 onlclick 这很好用 现在 当我单击页面底部的 Ajaxical 更新按钮时 问题
  • 如何在浏览器调整大小时调整div大小

    是的 所以我不使用粘性页脚 而是决定创建一个 jQuery 函数来更改 mainContent div 的大小 以便页脚可以很好地适应 基本上我想做的是 mainContent height 100 40px Where footer he
  • 在响应式网格上设置多个“相同高度”行部分的 CSS 唯一解决方案

    Wanted 仅 CSS 的解决方案 可在每行基础上启用多个等高网格 部分 并且也是响应式的 注意 这是一个后续问题这个问题 https stackoverflow com questions 44115503 css only solut
  • Spring MVC - 两次提供内容

    我已经花了一周时间寻找有关如何将内容服务器到我的网页的指导 两次 因为使用 Model 或 ModelAndView 切断内容一次可以工作 但如果用户再次与页面交互 我希望它加载更多内容同一页 Java Spring 后端方法 Get 有效
  • 有没有办法向 JavaScript 对象添加元数据?

    我想将元数据的键值对添加到任意 JavaScript 对象 此元数据不应影响不知道元数据的代码 这意味着例如 JSON stringify obj JSON stringify obj WithMetaData key value 元数据感
  • 如何使用 Chart.js 在堆积条形图中显示内联值?

    我正在使用 Chart js 库在堆叠条形图中显示一些值 但我正在努力找出如何显示条形图中的值 即 现在 我有以下代码 可以在条形顶部显示数字 但我想知道如何在条形内部显示它们 var numberWithCommas function x
  • 返回深度嵌套数组中对象的索引的函数

    我可能需要编写一个函数 仅输出数组内对象的索引 显然 使用 inArray 在下面的示例中返回这个索引就可以了 array one two three inArray one array 0 对于更复杂的数组 如何找到嵌套对象的索引 arr
  • jQuery mobile 在 Opera Mini 浏览器中失败。如何获得错误输出?

    I have a jQuery Mobile http en wikipedia org wiki JQuery Mobile website that works great on normal browsers but it fails
  • 如何使元素水平居中?

    如何水平居中 div 在另一个内 div 使用CSS div div Foo foo div div With flexbox水平和垂直居中的 div 样式非常容易 inner border 0 05em solid black outer

随机推荐

  • 无法在 Tkinter 中禁用自动换行

    我正在尝试在禁用自动换行和水平滚动条的文本窗口中写入 如下所示 root Toplevel root geometry dx d 0 0 350 400 af Frame root chtext Text af width 45 wrap
  • 2.5升级后无法编辑Streamfield页面

    我在本地开发中有一个使用 Streamfield 和 2 个自定义 StructBlock 字段的站点 在 2 4 中工作正常 但升级到 2 5 后 我可以在管理中正常创建页面 但当我保存后在管理中编辑该页面时 会出现错误 我也尝试使用新的
  • 如何将div转换为图像?

    我有一个 div 我需要制作这个 div 的图像并发送给服务器 有什么方法可以使用 Angular 7 来做到这一点吗 我尝试搜索库但没有结果 所有解决方法都使用原生 JS 要将 HTML 内容保存到图像中 您需要使用HTML2CANVAS
  • 在 rabin-karp 滚动哈希中选择基数和模素数

    哈希函数的解释为维基百科 http en wikipedia org wiki Rolling hash 它说 a 和 n 的选择对于获得良好的散列至关重要 并引用了一篇感觉不相关的线性同余生成器文章 我无法弄清楚这些值是如何选择的 有什么
  • driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS) 不起作用

    driver manage timeouts implicitlyWait 10 TimeUnit SECONDS 上面的隐式等待代码在 Google Chrome 上对我不起作用 我尝试过使用 selenium 2 47 和 2 53 1
  • 如何在 conda 环境中启动 exe

    我在 Windows 10 中使用 vscode 作为代码编辑器 并希望找到一种简单的方法来使用正确的 conda env 启动它以进行调试 目前 我必须打开命令提示符 然后激活 conda env 然后将 vscode 的快捷方式粘贴到提
  • 直接渲染CGImage(而不是UIImage)?

    我正在做一个CGImage func otf gt CGImage 这是渐变上的贝塞尔蒙版 所以 the path let p UIBezierPath p moveTo etc the mask let m CAShapeLayer se
  • Crystal Reports 10 命令对象更改数据源位置

    我已经在 Crystal Report 中使用了命令对象 现在我需要更改数据源 我已按照知识库文章 c2016958 中的说明进行操作 下载 解压缩并应用了 cr10win en zip 和 dbex10win en zip 但我的连接仍然
  • 访问reactjs中的viewbag属性

    我正在开发一个Web应用程序 我使用reactjs和MVC c 我想知道 jsx 是否包含在 cshtml 中 是否可以访问 jsx 中的 viewbag 属性 我想要将一个对象或 id 传递给 jsx 并将其呈现在 UI 中 ViewBa
  • 如何制作单独的角材料步进器标题和内容?

    我正在用有角度的材料做一个垂直步进器 问题是这个步进器将每个步骤的内容放在步骤标题下方 因此如果有很多步骤 它看起来会很糟糕 因为你必须滚动 我的想法是将标题与内容分开 这样它看起来更像是侧导航 但具有角度材质功能 这是我现在所拥有的 内容
  • 从 Java Applet 调用 Javascript 函数

    我在 HTML 页面中有一个 Java Applet 我需要让小程序调用某个 Javascript 函数来通知 HTML 页面某些事件 我目前调用 JavaScript 函数的方式是 getAppletContext showDocumen
  • Clojure 哈希映射到 xml

    我正在尝试将以下映射转换为 xml 任何具有向量值的键都需要为向量中的每个元素重复 xml 中的键 use clojure xml defn map to xml2 k v cond nil k for e a v tag e conten
  • 使用 DatabaseMetaData 检索 mysql 表注释

    因此 我正在将 Vaadin Java Web 框架用于需要编辑表的功能的项目 Vaadin 提供了一种获取方法Connection对象来自SimpleJDBCConnectionPool 这是 API https vaadin com a
  • XSLT - 从模板中删除空格

    我正在使用 XML 存储一个小型联系人列表 并尝试编写一个 XSL 模板将其转换为 CSV 文件 我遇到的问题是输出中存在空格 输出 Friend John Smith Home 123 test Sebastopol California
  • 在 Matlab 中向量化数组索引/取子集

    假设我有一个长数据向量 y 加上一些索引 我想在每个索引周围提取一个简短的片段或窗口 例如 假设我想构建一个矩阵 其中每个小于 3 的值之前包含 64 个样本 之后包含 64 个样本 这在 for 循环中很简单 WIN SIZE 64 Sa
  • 监视器应该等待什么对象?

    使用 Monitor Wait object obj 时 应该对 obj 使用什么 在这个article http www yoda arachsys com csharp threads 我正在阅读 NET 中的多线程 作者实例化了一个新
  • ASP.NET Core 1.0 - MVC 6 - Cookie 过期

    UPDATE 这绝对不是 RC1 中的错误 cookie 设置与默认的 UserManager 和 UserStore 一起使用 因此它一定与我的 UserManager UserStore 有关 我已经监督过 我基本上使用这里的实现 ht
  • 对数据帧的每一行应用函数并同时递增计数器

    我知道我可以使用apply 在数据帧的每一行上应用函数 如下所示 import pandas as pd df pd DataFrame Name A B C Number 1 2 3 def func row pass df apply
  • 将 Azure 网站连接到 Xero 合作伙伴应用程序

    我正在将我的应用程序与 Xero 集成 这需要两个证书 我在以下人员的帮助下将它们上传到 Azurethis https azure microsoft com en us blog using certificates in azure
  • HTML 使文本可点击,而不使其成为超链接

    我想添加这样的功能 可以选择单击某些 HTML 文本并执行正确的 JavaScript 代码 我怎样才能做到这一点 对于语义我会使用