ReactJS导航栏语言切换按钮激活状态设置及样式问题咨询

好的，我来帮你解决这两个问题：

要实现仅导航栏内的语言按钮动态切换active类，核心思路是用React状态跟踪当前选中的语言，然后在渲染时根据状态判断是否给对应按钮添加类名。

步骤1：添加状态跟踪当前语言 #

首先在你的类组件中，添加一个状态来记录当前选中的语言：

constructor(props) {
  super(props);
  this.state = {
    currentLang: this.ita, // 设置默认选中的语言，比如ITA
  };
  this.changeLan = this.changeLan.bind(this);
}

如果你用的是类字段语法（更简洁）：

state = {
  currentLang: this.ita,
};

// 用箭头函数自动绑定this，不用在constructor里绑定
changeLan = (lang) => {
  this.setState({ currentLang: lang });
  // 这里加入你切换语言的核心逻辑，比如更新翻译上下文、全局语言状态等
};

步骤2：动态渲染类名 #

修改语言按钮的className，通过条件判断决定是否添加active类：

<div className="nav-mobile">
  <div className="link-list-wrapper collapse" id="menu1">
    <nav>
      <ul className="link-list">
        <li>
          <a 
            className={`list-item ${this.state.currentLang === this.ita ? 'active' : ''}`} 
            onClick={() => this.changeLan(this.ita)}
          >
            ITA
          </a>
        </li>
        <li>
          <a 
            className={`list-item ${this.state.currentLang === this.eng ? 'active' : ''}`} 
            onClick={() => this.changeLan(this.eng)}
          >
            ENG
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

这样每次点击语言按钮时，状态会更新，组件重新渲染后，只有当前选中的按钮会带上active类，完全不会影响网站其他部分。

鼠标悬停时样式不像正常链接，通常是因为你的CSS覆盖了a标签的默认交互样式。默认情况下，a标签hover时会有下划线和颜色变化，但如果你的.list-item类重置了这些样式，就会失去链接的交互感。

你可以在CSS中为.list-item添加hover状态的样式，模拟默认链接的行为：

/* 基础样式 */
.list-item {
  color: #333; /* 设置默认文字颜色 */
  text-decoration: none; /* 如果去掉了默认下划线，这里可以保留或修改 */
  padding: 8px 10px;
  transition: all 0.2s ease; /* 可选，添加平滑过渡动画 */
}

/* 激活状态样式 */
.list-item.active {
  color: #007bff; /* 激活时的高亮颜色 */
  font-weight: bold; /* 可选，加粗强调 */
  border-bottom: 2px solid #007bff; /* 或者用底部边框标识激活状态 */
}

/* 悬停样式，还原链接的交互感 */
.list-item:hover {
  color: #007bff; /* 悬停时的颜色变化 */
  text-decoration: underline; /* 加上下划线，和默认链接一致 */
  /* 也可以用背景色替代：background-color: #f8f9fa; */
}

如果样式被其他更高优先级的CSS覆盖，你可以用更具体的选择器来提升优先级：

.nav-mobile .link-list .list-item:hover {
  /* 你的悬停样式 */
}

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