如何在<a>单击标签颜色时更改标签颜色，直到我更改 URL 才会更改

我想做的基本上是在点击链接时保持链接的颜色，悬停在导航栏链接上会使其变灰，当我点击它时，当它停留在URL上时，我想保持不同的颜色。我将react-router-dom用于链路组件

         <nav>
          <ul className="nav-wrapper">
            <li>
              <Link className="link" to="/">
                Home
              </Link>
            </li>
            <li>
              <Link className="link" to="/gallery">
                Gallery
              </Link>
            </li>
            <li>
              <Link className="link" to="/about">
                About
              </Link>
            </li>
          </ul>
        </nav>

我真的不知道该在这里使用什么，我不知道当我点击它或在CSS上更改它时，我是否应该使用useState来尝试更改它，任何提示都将不胜感激。

(我没有很好地理解你的问题，所以我两个都理解了(好啊尝试更改未访问的链接(CSS(a:link { color: what color you want; }

使用此更改已访问的链接(CSS('a:visited { color: what color you want; }

代码示例：

a:active {
  color: green;
}
a:visited {
color: purple;
}

<a href="#"> This link will change color<a>

如果找到答案，请标记。

react-router-dom有一个名为NavLink的附加组件，您可以向它传递一个称为activeClassName的附加道具。这将允许您为活动链接提供自定义样式。

示例：

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

此组件将替换导航中的所有Link组件。

使用:active psudo选择器。文档

const [selectedItem, setSelectedItem] = useState(0);
        <nav>
          <ul className="nav-wrapper">
            <li>
              <Link className={`link ${selectedItem===0?'active':''}`}  to="/" onClick={()=>setSelectItem(0)}>
                Home
              </Link>
            </li>
            <li>
              <Link className={`link ${selectedItem===1?'active':''}`} to="/gallery" onClick={()=>setSelectItem(1)}>
                Gallery
              </Link>
            </li>
            <li>
              <Link className={`link ${selectedItem===2?'active':''}`} to="/about" onClick={()=>setSelectItem(2)}>
                About
              </Link>
            </li>
          </ul>
        </nav>

然后你可以在CSS、上写

 li .active{
     color: #your color;
 }

相关内容

最新更新

热门标签：