实际上我想将选项卡菜单的事件样式设置为悬停样式。 即使我尝试使用 activeClassName="selected"也不起作用。任何人都可以帮助解决我正在尝试的问题吗?
我正在使用的CSS
.my-navbar{
color: #037979;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.6rem;
text-decoration: none;
margin: 10px 10px 10px 10px;
}
.my-navbar:visited {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
}
.my-navbar:hover {
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #c10944;
font-size: 16px;
background-color: #61dafb;
}
.active {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #c10944;
font-size: 16px;
background-color: #61dafb;
}
react-bootstrap、react-router-dom 这些是使用的导入
<Router>
{/*header Menu Bar*/}
<div className="mycontainer">
<Navbar bg="transparent" expand="lg">
<Navbar.Brand>
<div>
<img src={logo} alt="logo" width="200" />
{/* <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
</div>
</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle" style={{marginTop: 30}}>
<Nav className="ml-auto" bsStyle="tabs" >
<Link activeClassName="selected" className="my-navbar" to="/">Home</Link>
<Link activeClassName="selected" className="my-navbar" to="/about">About</Link>
<Link className="my-navbar" to="/services">Services</Link>
<Link className="my-navbar" to="/contact">Contact</Link>
<Link className="my-navbar" to="/galleries">Galleries</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*Slider Bar*/}
<Slidingmain />
<div style={{ paddingTop: 50 }}>
<Route defaultActiveKey="/home" path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} className="container-full"/>
<Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
<Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
<Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
<Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
<Footer />
</div>
</Router >
最佳答案
如果使用react-bootstrap Nav.Link,你可以使用 defaultActiveKey 像这样:
<Nav defaultActiveKey="#home" className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
关于reactjs - React Bootstrap 自定义导航链接事件样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61314053/