Question

我正在尝试将一个类添加（不替换）到div。根据我的理解，我的所有代码都是正确的......但它似乎没有用。

function clickTab(clicked_id) {
  var x = clicked_id
  x.className += " active"
}

.active {
  background-color:red;
}

<div id="communitytab" onClick="clickTab(this.id)">Interesting community content</div>

Answer 1

您只是传递元素的ID而不是读取元素。

这样做：

function clickTab(clicked_id) {
    var x = document.getElementById(clicked_id);
    x.className += " active"
}

Answer 2

你刚刚定位错误，这将适用于任何恰好调用该函数的元素。

＆＃13;

function clickTab(clicked_id) {
    var x = clicked_id.id;
    document.getElementById(x).classList.add("active");
}

＆＃13;

.active {
  background-color:red;
}

＆＃13;

<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>

＆＃13;

Answer 3

最简单的解决方案就是不传递ID，而是将整个元素本身传递给函数。然后，您可以在函数本身中检索DOM节点的ID，这样您就不必再次查询DOM了：

＆＃13;

function clickTab(el) {
  el.className = " active";
  
  // Get the ID
  var id = el.id;
  console.log(id);
}

＆＃13;

.active {
  background-color:red;
}

＆＃13;

<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>

＆＃13;

但是，你应该真的避免使用内联JS。相反，请改用Element.addEventListener，它将传递DOM节点作为上下文this。此外，您可以使用classList代替className（实际上是very widely supported now，约占所有浏览器流量的98％），因为API允许您使用内置网站轻松添加/删除类在原型中，例如el.classList.add('active')：

＆＃13;

function clickTab() {
  var el = this;
  el.classList.add('active');
  
  // Get the ID
  var id = el.id;
  console.log(id);
}

document.getElementById('communitytab').addEventListener('click', clickTab);

＆＃13;

.active {
  background-color:red;
}

＆＃13;

<div id="communitytab">Interesting community content</div>

＆＃13;

Answer 4

我觉得你的代码在浏览器引擎上运行时很好，但在jsfiddle中却没有。

此主题似乎与同一问题有关：JavaScript not running on jsfiddle.net

尝试将类添加到<div> - javascript

4 个答案: