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 有一个道具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//
}

从导航栏中选择项目-项目保持高亮显示

1 个答案: