Bulma导航栏-单击时的项目颜色

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
  </div>

  <div id="navbar" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/bulma@0.9.3/js/bulma.min.js"></script>

<a class="navbar-item has-dropdown navbar-link" href="#">
  Projects
</a>

<div class="navbar-dropdown">
  <a class="navbar-item" href="#">Project 1</a>
  <a class="navbar-item" href="#">Project 2</a>
  <a class="navbar-item" href="#">Project 3</a>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // 初始化所有下拉菜单
    var dropdowns = document.querySelectorAll('.navbar-item.has-dropdown');
    dropdowns.forEach(function (dropdown) {
      dropdown.addEventListener('click', function (event) {
        event.stopPropagation();
        dropdown.classList.toggle('is-active');
      });
    });
  });
</script>