Question

我正在做一个chrome扩展程序，并将其放在我的popup.html中：

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

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

谢谢。

Answer 1

根据Google Developper documentation，您可以将任何其他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>

如何在Chrome扩展程序中设置活动类

1 个答案: