<a>当我点击它时如何更改标签颜色并且在我更改我的 URL 之前它不会改变</a>

Question

我要做的基本上是在单击链接时保持链接的颜色，将导航栏链接悬停使其呈灰色，当我单击它并停留在 URL 上时，我想将其保持为不同的颜色. 我正在为 Link 组件使用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>

我真的不知道在这里使用什么，我不知道我是否应该在单击它时使用 useState 来尝试更改它或在 CSS 上更改它，任何提示都表示赞赏。

Answer 1

（我没有很好地理解你的问题，所以我都做了）好的！ 试试这个来改变一个未访问的链接 (CSS) a:link { color: what color you want; } a:link { color: what color you want; }

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

代码示例：

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

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

如果您找到答案，请标记答案。

Answer 2

使用:active psudo 选择器。 文档

Answer 3

react-router-dom有一个名为NavLink的附加组件，您可以向该组件传递一个名为activeClassName的附加属性。 这将允许您将自定义 styles 提供给您的活动链接。

例子：

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

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

Answer 4

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;
 }