Как установить активный класс в расширении Chrome - PullRequest
Новая
       0

Как установить активный класс в расширении Chrome

0 голосов
/ 06 февраля 2019

Я делаю расширение для 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?

Спасибо.

1 Ответ

0 голосов
/ 06 февраля 2019

Согласно документации 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...