如何根据链接是否处于焦点位置更改导航栏的高度？答案

【问题标题】：How do I change my navbar's height based on whether a link is in focus?如何根据链接是否处于焦点位置更改导航栏的高度？
【发布时间】：2022-08-16 08:15:23
【问题描述】：

我正在使用 React 和 javascript 来设置我的网页样式，并且我在我的导航栏中实现了一个跳过链接，当用户点击该链接时，它会将用户带到页面下方。此跳过链接仅在用户点击 tab 键时才会成为焦点，但它位于导航栏中的站点徽标上方，因此在可见时需要更多空间。当链接可见时，我想增加导航栏的高度，现在我正在使用一个名为 linkHasFocus 的布尔值（用于一些条件 CSS 样式），以及一个名为 checkFocus 的函数来做到这一点：

const TopNavbar = styled. div`
      ...
      height: ${props => (props.linkHasFocus ? \'9rem\' : \'4rem\')}; 
      ... 
`;

这是 checkFocus 函数：

const checkFocus = () => {
      const elem = document.getElementById(\'skip-link\');
      if (elem === document.activeElement) {
        this.linkHasFocus = true;
      }
      this.linkHasFocus = false;
      return this.linkHasFocus;    
};

然后我将它传递给我的返回函数中的 TopNavbar 组件，如下所示：

<TopNavbar linkHasFocus={checkFocus}>

但似乎 checkFocus 函数没有正确更新 linkHasFocus 变量。我对 props 和 javascript 的一般理解有点不稳定，如果这里有明显的问题，我深表歉意。

标签： javascript css reactjs jsx

【解决方案1】：

您可以使用 CSS :focus 选择器。

【讨论】：