Question

我刚刚为我维护的网站上的董事会名单创建了一个目录。目前，我在每个<a>内嵌套了一个<li>标记，该标记引用了每个人详细信息的位置。这是目录的样子：

<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">的背景颜色将变为某种黄色，并渐变为透明。

页面周围的移动已经有效（它只是一个id的href），我知道如何使用jquery为背景颜色设置动画。我无法弄清楚如何选择<td id="1">。我只能用

做到这一点

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

但是列表中有20多个项目，我不希望每个项目都有单独的事件。请指教。

谢谢！

Answer 1

只需将href属性用作ID

即可

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

它只是一个字符串，与写$('#1')完全一样（BTW，不要使用数字作为ID＆＃39;）

Answer 2

首先，将您的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';
                           });




});}

<强> DEMO

我可以选择链接引用的ID吗？

2 个答案: