使用CSS更改单击时锚标记的颜色

btqmn9zl 于 2023-01-22 发布在其他

关注(0)|答案(3)|浏览(133)

我有一个锚标记“主页”显示主页，另一个锚点标记“书籍”显示书籍页。现在，当我单击“主页”链接时，我希望它更改颜色并保持相同颜色，直到我单击其他链接。同样，当我单击“书籍”链接时，我希望它更改颜色并保持相同颜色，直到我单击其他链接。
我可以用JavaScript来做，但我想知道我如何才能只使用CSS来实现它？
我尝试了一个：积极的，但它不工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Bookstore</title>
</head>
<body>
    <div class="container">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="books.html">Books</a></li>
            </ul>
        </div>
      
    
</body>
</html>

css

来源：https://stackoverflow.com/questions/75155153/change-color-of-anchor-tag-on-click-using-css

3条答案

按热度按时间

rfbsl7qr1#

你可以这样做，使用focus，但如果只使用样式将丢失一旦另一个元素获得焦点，所以添加一个类到您的a像我的例子link然后在CSS中使用它像下面的演示：

a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

a:focus {
  color: red;
}

:link {
  color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Bookstore</title>
</head>
<body>
    <div class="container">
            <ul>
                <li><a href="#" class="link">Home</a></li>
                <li><a href="#" class="link">Books</a></li>
            </ul>
        </div>
      
    
</body>
</html>

赞(0）回复(0）举报 2023-01-22

ctehm74n2#

HTML code
<a tabindex="1">Your Button</a>

CSS code
a {   
    color: black;  
    font-size: 30px; 
}

a:active {
    color: rebeccapurple;
}

a[tabindex]:focus {
    color:rebeccapurple;
}

赞(0）回复(0）举报 2023-01-22

qgzx9mmu3#

为每个锚元素添加一个tabindex可以应用一个：focus伪类：

<style>
ul li a {
    color: #000;
}
ul li a:focus {
  color: red;
}
ul li a:selected {
  color: red;
}
</style>

<ul>
  <li><a tabindex="1" href="#" class="selected"> item1 </a></li>
  <li><a tabindex="1" href="#" class="selected"> item2 </a></li>
  <li><a tabindex="1" href="#" class="selected"> item3 </a></li>
</ul

赞(0）回复(0）举报 2023-01-22

我来回答

使用CSS更改单击时锚标记的颜色

3条答案

相关问题

热门标签

最新问答