[英]React router v4 active anchor link
I got anchor links in my app. 我的应用程序中有锚 链接 。 How do I make active style work if anchor link
is active. 如果anchor link
处于活动状态,如何使活动样式起作用。
<NavLink
to="/#somewhere"
activeClassName="selected"
>AnchorLink</NavLink>
For styling current active link you can give styles to class that is provided in parameter activeClassName
, but it does not work with hash URLs, but for active class we can compare location.hash
with our hash name. 要为当前活动链接设置样式,可以为参数activeClassName
提供的类提供样式,但不适用于哈希URL,但是对于活动类,我们可以将location.hash
与我们的哈希名称进行比较。
example: 例:
<li>
<Link className={location.hash == "#about" ? "active" : ""} to='#about'>
About
</Link>
</li>
<li>
<Link className={location.hash == "#user" ? "active" : ""} to='#user'>
User
</Link>
</li>
<li>
<Link className={location.hash == "#repo" ? "active" : ""} to='#repo'>
Repository
</Link>
</li>
So for this example we have provided styles 因此,对于此示例,我们提供了样式
.active {
font-weight: bold;
}
so font will be bold only for link that is currently active. 因此,字体仅对于当前处于活动状态的链接为粗体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.