当用户在页面上处于活动状态时，如何继续显示 link 元素的边框底部

Question

当我在导航栏中单击一个 link 时，我希望我的边框底部继续显示有两种行为： - 悬停时：显示边框底部。 - 当在 link 上处于活动状态时，继续显示底部边框（用户在页面上处于活动状态）。

我不知道该怎么做，有人可以帮助我吗？谢谢！

文件 scss -

 a {
    span {
     padding-bottom: 5px;
    }
   }
   a:nth-child(1) :hover {
    border-bottom: 3px solid "blue";
   }
   a:nth-child(2) :hover {
    border-bottom: 3px solid #8e1cfb;
   }

反应组件导航栏 tsx 文件 -

      <div>
       <Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
        <span>Link 1</span>
       </Link>
       {''}
       <Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
        <span>Link 2</span>
       </Link>
      </div>

Answer 1

只需处理 css.For 示例中的 active class .active { color: white; border-bottom: 3px solid #2196f3; }

由于您使用的是 React 路由器 Link，您将在路由处于活动状态时默认添加 active class。

Answer 2

[编辑]：我下面的解决方案工作正常但不使用默认的 'active' class 当你点击Link。我在 This Stackblitz for react-router 上玩过它（如果你使用的是路由器 v5，你需要更新包并将 Link 更改为 NavLink）但无法使活动 class 工作正确地，active class 没有从第一个 Link 中删除，不知道为什么（但是你可以检查代码，你会看到它 是添加到您的其他链接).

现在，如果您愿意，还有一个 activeStyle 可以使用（不推荐，bleh）。

您的链接都是 div 的第一个子链接，因此您可以：

const App = () => {
  const setActiveLink = e => {
    // easier for me, you can change with getElementById or getElementByClassName
    const links = document.getElementsByTagName("a"); 

    Array.from(links).forEach(el => el.classList.remove("active"));
    e.target.classList.add("active");
  };

  return (
    <div className="navbar">
      <a href="#" onClick={setActiveLink}>
        link 1
      </a>
      <a href="#" onClick={setActiveLink}>
        link 2
      </a>
      <a href="#" onClick={setActiveLink}>
        link 3
      </a>
    </div>
  );
};

Adn 在您的 css 中只需添加：

div > a {

  text-decoration: none;
  padding: 5px;
}

div > a:hover{
  border-bottom: 1px solid red;
}

.active {
  border-bottom: 1px solid red;
}

当然，您必须调整我选择的 css 标签以匹配您的代码。这里以 stackblitz 为例：Example on Stackblitz

当用户在页面上处于活动状态时，如何继续显示 link 元素的边框底部

how to keep displaying a border bottom for a link element when a user is active on a page

css

hyperlink

hover

reactjs