如何为滚动的html中的活动链接添加li边框答案

【问题标题】：How to add border for li for active link in html on scroll如何为滚动的html中的活动链接添加li边框
【发布时间】：2020-05-01 21:05:21
【问题描述】：

在 reactjs 中设计单页应用程序。我在页面顶部有一个固定的导航栏，我有 4 个部分。单击 navabr 中的链接时，它会跳转到该特定部分。但我想用小突出显示该 li下方的边框。如果用户滚动到任何部分而不单击导航栏中的链接，则该链接必须用边框突出显示。

// header.js

  <ul className="col-2 flex-row flex-justify-align-center ">
   <li className="navigation__link"><a  href="#problem">Problem</a></li>
   <li className="navigation__link"><a  href="#solution">Solution</a></li>
   <li className="navigation__link"><a href="#footprint">Footprint</a></li>
   <li className="navigation__link"><a  href="#services">Services</a></li>
   <li className="navigation__link"><a  href="#contact">Contact</a></li>             
  </ul>

function App() {
  return (
    <div className="App">
      <div id="problem"></div>
      <Header></Header>
      <div id="solution">
        <Solution></Solution>
      </div>
      <div id="footprint">
        <Footprint></Footprint>
      </div>
      <div id="contact">
        <Contactus></Contactus>
        <Footer></Footer>
      </div>

    </div>
  );
}

问题不清楚，因为我不知道如何针对此要求提出问题。

【问题讨论】：

标签： html css reactjs css-selectors

【解决方案1】：

你需要使用滚动间谍。访问这个 git 存储库React-scrollspy。

【讨论】：

@Krazy 我不是否决你的问题的人。