爱学习的小朋友 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条回答 默认 最新

  • 关注

    你题目的解答代码如下:

    <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 vhdl+MODELSIM
  • ¥20 simulink中怎么使用solve函数?
  • ¥30 dspbuilder中使用signalcompiler时报错Error during compilation: Fitter failed,求解决办法
  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么
  • ¥15 网站显示不安全连接问题