我可以使用javascript在跨度文本上附加锚定标记吗

单击范围项目时如何打开链接。这就是我所做的

我不想在每个span元素中放置锚定标记，而是希望使用onClick编辑html，以便仅在有人单击时插入链接。 我该怎么做

nav{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.链接{
文字装饰：无；
颜色：#000；
位置：相对位置；
字号：2rem；
字号：600；
字母间距：4px；
}
链接：之后{
内容：“；
/*显示：块*/
位置：绝对位置；
宽度：0；
右：0；
底部：0；
高度：2倍；
背景色：#2987FF；
过渡：宽度.18s立方贝塞尔（0.45,0.05,0.55,0.95）
}
.link:悬停：在{
宽度：100%；
左：0；
}
@-webkit关键帧颜色1{
0% {
颜色：#00f；
}
50% {
颜色：#0f0；
}
75% {
颜色：#000；
}
100% {
颜色：#f00；
}
}
@-webkit关键帧颜色2{
0% {
颜色：红色；
}
50% {
颜色：绿色；
}
75% {
颜色：黑色；
}
100% {
颜色：蓝色；
}
}
@-webkit关键帧颜色3{
0% {
颜色：紫色；
}
50% {
颜色：黄色；
}
75% {
颜色：紫罗兰色；
}
100% {
颜色：黑色；
}
}
@-webkit关键帧颜色4{
0% {
颜色：橙色；
}
50% {
颜色：黑色；
}
75% {
颜色：蓝色；
}
100% {
颜色：紫色；
}
}
#a{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors1；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（3，结束）；
}
#b{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors2；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
#c{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors3；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
#d{
-webkit动画方向：正常；
-webkit动画持续时间：4s；
-webkit动画迭代计数：无限；
-webkit动画名称：colors4；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
em{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
字号：4rem；
字体样式：无；
字号：600；
光标：指针；
}

P
o
R
T
F
o
L
我
o

像这样的东西

注意，我必须将您的ID更改为类，因为您不能重用ID

const linksObj={
a:“https://google.com",
b:“https://msdn.com",
c:“，
d:“，
e:“，
f.：，
g:“，
h:“，
我：“”
}
document.querySelector（“链接”）.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
如果（tgt.tagName==“SPAN”）{
location=linksObj[tgt.id]
}
})

nav{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.链接{
文字装饰：无；
颜色：#000；
位置：相对位置；
字号：2rem；
字号：600；
字母间距：4px；
}
链接：之后{
内容：“；
/*显示：块*/
位置：绝对位置；
宽度：0；
右：0；
底部：0；
高度：2倍；
背景色：#2987FF；
过渡：宽度.18s立方贝塞尔（0.45,0.05,0.55,0.95）
}
.link:悬停：在{
宽度：100%；
左：0；
}
@-webkit关键帧颜色1{
0% {
颜色：#00f；
}
50% {
颜色：#0f0；
}
75% {
颜色：#000；
}
100% {
颜色：#f00；
}
}
@-webkit关键帧颜色2{
0% {
颜色：红色；
}
50% {
颜色：绿色；
}
75% {
颜色：黑色；
}
100% {
颜色：蓝色；
}
}
@-webkit关键帧颜色3{
0% {
颜色：紫色；
}
50% {
颜色：黄色；
}
75% {
颜色：紫罗兰色；
}
100% {
颜色：黑色；
}
}
@-webkit关键帧颜色4{
0% {
颜色：橙色；
}
50% {
颜色：黑色；
}
75% {
颜色：蓝色；
}
100% {
颜色：紫色；
}
}
.a{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors1；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（3，结束）；
}
.b{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors2；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
c{
-webkit动画方向：正常；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：无限；
-webkit动画名称：colors3；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
博士{
-webkit动画方向：正常；
-webkit动画持续时间：4s；
-webkit动画迭代计数：无限；
-webkit动画名称：colors4；
/*-webkit动画计时功能：轻松*/
-webkit动画计时功能：步骤（2，结束）；
}
em{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
字号：4rem；
字体样式：无；
字号：600；
光标：指针；
}

P
o
R
T
F
o
L
我
o

请访问，并查看和。做一些研究，搜索相关话题等；如果遇到问题，请发布您的尝试，并使用

[]

代码段编辑器记录输入和预期输出。当他们要求你发布代码时，请不要试图绕过Stackoverflow。我确实知道这一点，但我见过有人发布JSFIDLE的LIK，这就是我直接发布我的代码笔链接的原因。我会的