如何使用JavaScript将不同的基本HREF设置或附加到不同的链接？

我想通过为超链接设置多个基本HREF来减少网页代码中的混乱。具有相同基础HREF的链接也具有相同的CSS类。使用JavaScript，有没有一种方法可以将基本HREF附加到相对链接？这很难解释，但这里有一个例子：

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

---

我想为所有带有蓝色类的链接添加一个基本href，并为所有带有红色类的链接添加一个不同的基本href。实际上，我在文档中还有几个类，但是如果有人能够提供一个工作示例，我可以完成代码。我的页面有数百个链接，我经常更新，所以我需要尽可能修剪html。我精通HTML和CSS，但我仍在努力学习JavaScript。谢谢。

只是给你一个想法。大概是这样的：

var links=document.querySelectorAll（'a'）；
对于（变量i=0；i

函数绝对化href（klass，base）{
var nodes=document.queryselectoral（“.”+klass+“[href]”）；
Array.prototype.forEach.call（节点，函数（节点）{
var href=node.getAttribute（“href”）；
node.setAttribute（“href”，base+href）；
});
}
document.addEventListener（“DOMContentLoaded”），函数（事件）{
绝对化（蓝色）http://example.com/blue/");
绝对化（红色）http://example.com/red/");
});
这里的另一个答案提供了这方面的核心js解决方案

如果您乐于使用jQuery，jQuery将为您提供最干净的解决方案

如果您不熟悉jQuery，但愿意使用它，可以找到一个快速入门指南

下面是一个在jQuery中解决这个问题的示例。此解决方案的优雅之处在于，要扩展它，只需向classToPrefixMap添加一个键值对：


var classToPrefixMap={
绿色：'/path/to/green/'，
蓝色：'/path/to/blue/'
};
for（classToPrefixMap中的var键）{
$（'..+键）。每个（函数（索引、锚定）{
$（anchor.attr（'href'，classToPrefixMap[key]+$（anchor.attr（'href'））；
})
}

您是否了解jQuery，并且对使用jQuery感到满意？在可能的情况下避免使用jQuery是很好的，但是使用jQuery的代码将是最干净的。@JamieButler“我对HTML和CSS非常了解，但我仍在努力学习JavaScript”我非常确定jQuery不是一个选项；）这会将基本href插入到链接中，但它仍然会插入相对链接的完整路径。例如，下面是此代码的结果：file:///custom/blue/path/C:/Users/***/Desktop/sad1.html（我需要删除它从相对链接中提取的C:/Users/***/Desktop/部分）。@selah您可以尝试
links[key][I]。href='/'+links[key]。myPath+links[key][I]。路径名C:/Users/***/Desktop/
，所以不要为此而烦恼。但会有一条绝对的道路。可以下载XAMPP或其他内容，以便您可以使用
localhost
或
127.0.0.1
作为计算机上的绝对路径，但不确定windows的所有机会。但是如果你用谷歌搜索它，你会发现一百万个结果。谢谢。我不理解这个脚本，但它工作得很好。请注意，如果您依赖
DOMContentLoaded
，它在一些旧浏览器（尤其是IE8）上不会出现。最简单的方法是删除事件侦听器sutff，只需将
absolutionhere（…）
脚本添加到文档的末尾（以便您要更改的每个锚都已加载）。第二个最简单的方法是依赖jQuery这样的库，它提供了
ready
方法。第三种最简单的方法是使用
onload
（但是它比较慢，因为它等待图像和所有内容加载）。最难的选择实际上是重新发明热水，以向后兼容的方式正确实现。