javascript - 单击时更改链接背景颜色

Question

我想在用户单击链接时更改链接的背景颜色/onClick。这是我当前正在编写的代码；

<a href="javascript:void(0);" onclick="myFunction()" class="dropbtn" id="dropbtn">Link Drop Down</a>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  document.getElementById("dropbtn").onclick = function()
    {
        this.style.background = '#FFF';
    }
}

但它没有起作用，我不知道为什么。

Answer 1

<a href="javascript:void(0);" class="dropbtn" id="dropbtn">Link Drop Down</a>

function myFunction() {
  document.getElementById("dropbtn").onclick = function(event) {
    var drop_down = document.getElementById("myDropdown");
    if (!drop_down.classList.contains('show')) {
        drop_down.classList.add('show');
        this.style.background = '#FFF';
    }
    else {
        drop_down.classList.remove('show');
        this.style.background = '';
    }
    return true; 
  }
}
myFunction(); 

基本上，您必须安装 onclick 事件处理程序(请参阅 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers )，它接收带有事件信息的 event 参数。其中的 this 实际上指向 id=dropbtn 的元素，因此您可以像问题中那样直接引用它，也可以获取 event 上的引用。目标。

编辑

其实我错了，抱歉，this确实指向了点击的元素。修正了答案。