使用 css 更改 html 标记的 href

Posted

技术标签:

【中文标题】使用 css 更改 html 标记的 href【英文标题】:Changing the href of an html tag with css 【发布时间】:2013-02-27 16:47:45 【问题描述】:

我需要从

更改此 A 标签
<a href="contact.html" >Contact</a>

<a href="tel:+13174562564" >Contact</a>

如果可能或像这样,只使用 Css

<a href="tel:+13174562564" >+13174562564</a>

我有很多页面,我不想编辑所有页面,这将花费我一生的时间,这就是为什么我需要在 CSS 中进行,并且我没有链接到它们的 JS

【问题讨论】:

【参考方案1】:

一种解决方案是隐藏一个标签并放置另一个

<div id="tag1">
<a href="#tag1">link1</a>
<a href="#tag2">link2</a>
</div>

css:

a[href="#tag1"] 
display:block;


a[href="#tag2"] 
display:none;


#tag1:target  a[href="#tag1"]
 display:none;


#tag1:target  a[href="#tag2"]
 display:block;

我将这种方法用于菜单栏的响应式“按钮”

【讨论】:

【参考方案2】:

CSS 用于presentation,不能用于以您想要的方式修改 HTML 标记。 为此,您需要 javascript

应该是fairly short script.

【讨论】:

【参考方案3】:

CSS 只是显示,你不能用它修改文档对象模型。抱歉,这无法完成。我希望我有一个更好的答案,但“做不到”是唯一的答案。

【讨论】:

以上是关于使用 css 更改 html 标记的 href的主要内容,如果未能解决你的问题,请参考以下文章

使用表单值更改锚标记的 href 并单击新链接

更改将 HTML 标记名称扩展为元素的键

是否可以使用 CSS 使 HTML 锚标记不可点击/不可链接?

如何更改select option 边框颜色和选中的颜色,css优先,js次之??

使用HTML 和CSS 开发商业站点

更改传单标记群集图标颜色,继承其余默认 CSS 属性