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