如何用js实现点击获取某个a标签元素？

Question

这里有5个a标签 我想通过点击某个a标签来让这个标签的class属性为selected,目前我只会这样写，但是这样写出来的this或者target都是那个要跳转出去的网址。

var myhref = document.querySelector(".left").querySelector(".item").getElementsByTagName("a");

for(var i in myhref)
{

  //  myhref[i].onclick = function(event){alert(event.target) }；
      myhref[i].addEventListener("click",function(){alert(this)});

}

Answer 1

如果只是想点击后不跳转变颜色。可以阻止默认事件。

function(ev){
    ev.preventDefault();
}

如果点击后跳转，其实可以用a:visited伪类，表示访问过。

// css
a:visited{
    background:red;
}

另外this问题，用for var循环的，不是当前点击的this。这是典型的闭包问题。可以用ES6的let解决。

for (let i = 0; i < len; i++){
    // code here
}

Answer 2

a 标签的默认行为就是跳转， 你要先阻止他的默认行为
myhref[i].onclick = function(event){    
    event.preventDefault()
    alert(event.target) 
}；

Answer 3

选项卡式的导航不推荐用a标签，用div加cursor:pointer会比较好一些，这样就不会有a标签的事件。

Answer 4

先 ev.preventDefault(); 阻止默认事件，然后给 a 标签增加 class，el.className = 'selected';