从导航栏中选择项目 - 项目保持突出显示

Question

我有这样的简单导航栏：

 <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/`}>
        Blah
      </NavItem>
      <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/SomePage`}>
        SomePage
      </NavItem>
    </Nav>
  </Navbar.Collapse>

当我将光标放在 NavItem 上时，它会突出显示，但我希望在单击它后突出显示它，以告知我在页面上的位置。 所以：总结一下，有人知道如何突出显示选定的navitem吗？

Answer 1

我认为首先您需要为每个NavItem 使用唯一事件键。

Nav 有一个 prop activeKey 和一个处理程序 onSelect，利用它来设置 Nav 上的 activekey。

<Nav activeKey={(this.state.activeKey)} 
onSelect={e => {e.preventDefault(); this.handleSelect(e);}>

在此之后，您将在被点击的活动项目上获得一个 active 属性，所以现在是时候使用一些 CSS 伪选择器了。

.NavItem:active{
  background-color: green; //some color of your choice//
}