Android Studio：修改选中导航栏元素颜色及菜单栏字体方法

一、修改导航元素选中时的背景色 #

1. 给当前选中的导航项添加专属类（比如.active），示例HTML结构：

<nav class="nav-menu">
  <a href="#" class="nav-item">Home</a>
  <a href="#" class="nav-item active">Calculations</a> <!-- 选中项添加active类 -->
  <a href="#" class="nav-item">Settings</a>
</nav>

2. 通过CSS设置选中状态的背景样式：

/* 选中状态的背景色 */
.nav-item.active {
  background-color: #f5f5f5; /* 浅色调，可根据需求调整具体色值 */
  /* 可选：补充文字颜色、内边距等增强视觉效果 */
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
}

若需要点击切换选中状态，可配合简单JS实现：

// 获取所有导航项
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除所有项的active类
    navItems.forEach(nav => nav.classList.remove('active'));
    // 给当前点击项添加active类
    item.classList.add('active');
  });
});

二、修改菜单栏文字字体 #

直接通过CSS给菜单栏容器或导航项设置font-family属性即可：

/* 给整个菜单栏统一设置字体 */
.nav-menu {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 替换为你需要的字体 */
}

/* 或者单独给导航项设置字体 */
.nav-item {
  font-family: "Georgia", serif;
}

如果使用自定义字体（非系统默认字体），需要先通过@font-face引入：

@font-face {
  font-family: "CustomFont";
  src: url("path/to/custom-font.woff2") format("woff2"),
       url("path/to/custom-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* 应用自定义字体 */
.nav-menu {
  font-family: "CustomFont", sans-serif;
}

内容的提问来源于stack exchange，提问作者Дима Павлович