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

Bulma是一个基于Flexbox的现代CSS框架，提供了丰富的样式和组件，可以用于快速构建响应式的网页界面。Bulma导航栏是其中的一个组件，用于创建网页的顶部导航栏。

在Bulma中，导航栏的颜色可以通过修改CSS类来实现。具体来说，当单击导航栏中的项目时，可以通过添加一个特定的CSS类来改变项目的颜色。

以下是一个完整的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>

要实现单击导航栏项目时的颜色变化，可以使用Bulma提供的JavaScript插件。具体步骤如下：

在HTML文件中引入Bulma的CSS和JavaScript文件：

<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>

在导航栏项目中添加has-dropdown类和navbar-link类：

<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>

使用JavaScript代码初始化导航栏的下拉菜单功能：

<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>

通过上述步骤，当单击导航栏中的项目时，下拉菜单会显示，并且可以通过添加自定义的CSS类来改变项目的颜色。

对于Bulma导航栏的更多详细信息和使用示例，可以参考腾讯云的Bulma文档：Bulma导航栏。