如何使用Flutter开发选中后文字样式变更的选择菜单

要实现点击选中菜单项后，选中项文字切换为特殊样式的效果，可以用纯前端HTML+CSS+JavaScript组合实现，逻辑简单兼容性好，具体代码如下：

1. 菜单结构（HTML） #

<ul class="custom-menu">
  <li class="menu-item">菜单项1</li>
  <li class="menu-item">菜单项2</li>
  <li class="menu-item">菜单项3</li>
  <li class="menu-item">菜单项4</li>
</ul>

2. 样式定义（CSS） #

你可以自由调整选中态的样式规则，以下是示例效果：

/* 菜单基础样式 */
.custom-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
}
.menu-item {
  cursor: pointer;
  font-size: 16px;
  color: #666;
  padding: 8px 0;
  transition: all 0.2s linear;
}
/* 选中项自定义样式，按需修改属性即可 */
.menu-item.active {
  color: #1677ff;
  font-weight: bold;
  border-bottom: 2px solid #1677ff;
}

3. 交互逻辑（JavaScript） #

实现点击切换选中态的逻辑：

// 获取所有菜单项
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 清空所有菜单项的选中状态
    menuItems.forEach(el => el.classList.remove('active'));
    // 给当前点击项添加选中样式
    this.classList.add('active');
  });
});

如果是单页应用场景，也可以根据当前页面路由自动匹配对应的菜单项添加active类，不需要绑定点击事件。

内容的提问来源于stack exchange，提问作者petrashin_nikita