javascript - 如何在 Chrome 扩展中设置活动类

问题描述

我正在制作一个 chrome 扩展，并在我的 popup.html 中有这个：

<nav id="secondary-nav">
    <ul>
        <li class="active">Prerender</li>
        <li>Prefetch</li>
        <li>Preconnect</li>
    </ul>
</nav>

我想要做的是更改onclick纯 JS 中的活动链接。我如何以及在哪里可以做到这一点？我应该在 background.js 中制作它吗？

谢谢你。

标签： javascriptgoogle-chrome-extension

根据Google Developper 文档，您可以将任何其他 JS 文件链接到您的主 html 文件。

<!DOCTYPE html>
<html>
...
  <body>

    <script src="popup.js"></script>
  </body>
</html>

如果你想<li>在点击它时设置它，你应该使用这样的东西：

var menu = document.getElementById("menu");
var menu_items = menu.children;

for (var i = 0; i < menu_items.length; i++) {
  menu_items[i].onclick = function() {
    this.classList.add("active");
    
    // don't forget to reset the class of others
    for (var j = 0; j < menu_items.length; j++) {
      if (menu_items[j] != this) menu_items[j].classList.remove("active");
    }
  }
}

li.active {
  color: green;
}

<ul id="menu">
  <li class="active">link1</li>
  <li>link2</li>
  <li>link3</li>
  <li>link4</li>
</ul>

javascript - 如何在 Chrome 扩展中设置活动类

问题描述

解决方案

推荐阅读