单击锚标记使用JS添加类

Question

<p id="testhome-1">Test</p>
<p id="testhome-2">Test</p>

<a href="#testhome-1">Click</a>
<a href="#testhome-2">Click</a>

当我单击锚标记时，我想将一个类添加到Paragraph的特定ID。

Answer 1

普通JS：

window.onload=function() {
  document.querySelector("[href=#testhome-1]").onclick=function() {
    document.querySelector("#testhome-1").classList.add("clicked"); // or toggle
    return false; // cancel link
  }
}

或任何链接：

 window.onload = function() { var links = document.querySelectorAll("a"); for (var i=0;i<links.length;i++) { links[i].onclick = function() { document.querySelector("#"+this.href.split("#")[1]).classList.toggle("clicked"); return false; // cancel link } } } 

 .clicked { color:green } 

 <p id="testhome-1">Test</p> <p id="testhome-2">Test</p> <a href="#testhome-1">Click 1</a> | <a href="#testhome-2">Click 2</a> 

Answer 2

冲浪时，我发现了一个替代代码，当我单击锚定标签时，该类将类添加到特定的ID。 这个对我有用。 我不知道它是否适合所有浏览器。

在这里，我附上了代码。

$("a").on("click", function() {
   var id = $(this).attr('href');
   $('.active').removeClass('active'); // remove existing active
   $(id).addClass('active'); // set current link as active
});

请参阅jsfiddle： http : //jsfiddle.net/PremalathaKumar/3J9WK/109/