爱学习的小朋友 2022-07-04 00:21 采纳率: 88.9%
浏览 43
已结题

通过a标签href值找到对应的span标签内容

如下面的代码，通过js，怎样可以实现，点击类似[1]这样的a标签，根据a标签中的#n0279001值，找到底部注解中对应包含0279001的span，然后alert出它的内容呢？


<html lang="zh-cn">
<meta charset="utf-8" />
<head>
<title>测试标题</title>
</head>

<body>
<style>
a{
    color:red;
}
</style>
<p><a href="#n0279001">[1]</a>浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p><a href="#n0279002">[2]</a>主人下马客在船，<a href="#n0279003">[3]</a>举酒欲饮无管弦。</p>




<h5>注解:</h5>
<span><a href="#note_anchor_0279001">[0279001]</a> 浔阳是现在的江西省九江市</span><br>
<span><a href="#note_anchor_0279002">[0279002]</a> 主人公为白居易</span><br>
<span><a href="#note_anchor_0279003">[0279003]</a> 管乐器与弦乐器，亦泛指乐器；指管弦乐。</span>

</body>
</html>
  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2022-07-04 00:38
    关注

    你题目的解答代码如下：

    <html lang="zh-cn">
<meta charset="utf-8" />
<head>
<title>测试标题</title>
</head>
 
<body>
<style>
a{
    color:red;
}
</style>
<p><a href="#n0279001" onclick="func(this,event)">[1]</a>浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p><a href="#n0279002" onclick="func(this,event)">[2]</a>主人下马客在船，<a href="#n0279003" onclick="func(this,event)">[3]</a>举酒欲饮无管弦。</p>
 
 
 
<h5>注解:</h5>
<span><a href="#note_anchor_0279001">[0279001]</a> 浔阳是现在的江西省九江市</span><br>
<span><a href="#note_anchor_0279002">[0279002]</a> 主人公为白居易</span><br>
<span><a href="#note_anchor_0279003">[0279003]</a> 管乐器与弦乐器，亦泛指乐器；指管弦乐。</span>
 
<script type="text/javascript">
function func(a,event) {
    event.preventDefault();  //防止a链接跳转,如果不需要可以去掉
    var sp = document.querySelectorAll("span"); //获取页面中所有span, 如果要获取某个div中的span, 改成document.querySelectorAll("#div的Id span");
    for (var i = 0; i < sp.length; i++) {    //循环所有span
        var str = a.getAttribute('href').slice(2);  //获取a元素的href,去掉前面#n两个字符
        var spantext = sp[i].innerHTML;    //获取span的内容
        if(spantext.indexOf(str)!=-1)      //判断spantext 中是否包含str
            alert(spantext);
    }
}
</script>
</body>
</html>

    如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 7月12日
  • 已采纳回答 7月4日
  • 创建了问题 7月4日

悬赏问题

  • ¥15 关于#vscode#的问题：ESP32开发板对接MQTT实现小灯泡的开关
  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息，绿色字体是收到的消息，第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图：接线如下图，如何解决？
  • ¥15 高通安卓11提取完整线刷包软件，或者优博讯dt50顺丰刷机包
  • ¥20 C，有个译码器，换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题
  • ¥60 基于JTag协议开发Fpga下载器上位机，哪位大🐂有偿指导？
  • ¥20 全书网Java爬取数据
  • ¥15 怎么获取红包封面的原始链接，并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏