我可以选择链接引用的 id 吗?

Can I select the id referenced by a link?

本文关键字：id 引用 选择 链接 我可以      更新时间：2023-09-26

>我刚刚在我维护的网站上为董事会列表创建了一个目录。 目前，我在每个<li>中都有一个嵌套<a>标签，该标签引用了每个人的详细信息所在的位置。 目录如下所示：

<li><a href="#1">name goes here</a></li>

以下是页面上每个项目的外观：

<td id="1"> 
    <p>
        Name goes here<br>
        Details go here<br> 
    </p>
</td>

这就是我想要完成的目标。 当您单击<a href="#1">name goes here</a>时，您将被带到 <td id="1"> ，并且<td id="1">的背景颜色将变为某种黄色阴影并淡出为透明。

页面周围的移动已经起作用（它只是 href 到 id），我知道如何使用 jquery 对背景颜色进行动画处理。 我无法弄清楚的是 如何选择 <td id="1"> . 我可以简单地做到这一点

$('li a').click(function(){
    $('td#1').animate...
});

但是列表中有 20+ 个项目，我不想为每个项目设置单独的事件。 请指教。

谢谢！

只需使用 href 属性作为 ID

$('li a').click(function(){
    $( $(this).attr('href') ).animate...
});

它只是一个字符串，与写$('#1')完全相同（顺便说一句，不要使用数字作为 ID）

首先，将 id 更改为字符而不是数字，但使 href 与 id 相同。然后，您可以通过以下方式实现所需的目标：

var a = document.querySelectorAll('li a');
for (var i = 0;i<a.length;i++) {
a[i].addEventListener('click',function(e) {
    e.preventDefault();
    var b = this.getAttribute('href');
    document.getElementById(b).style.backgroundColor = 'yellow';
    $('html,body').animate({
              scrollTop: $('#'+b).offset().top},
                           'slow', function(){
                             document.getElementById(b).style.backgroundColor = 'white';
                           });


});}

演示

相关文章：