爱学习的小朋友 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日

悬赏问题

  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料