使用 css 更改 html 标记的 href

Posted 2023-03-05

【中文标题】使用 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:[phone]" >Contact</a>

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

<a href="tel:[phone]" >[phone]</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 只是显示，你不能用它修改文档对象模型。抱歉，这无法完成。我希望我有一个更好的答案，但“做不到”是唯一的答案。