Html 保持链接a：按链接后以相同方式激活

今天我在玩css和html，当鼠标悬停并点击时，我试图获得一个图片/链接来改变它的形式。但我没有做到的是，当我点击图像时，我选择的图像保持“点击”状态

以下是CSS：

#header {
    background-image: url(bg.jpg);
    height: 32px;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-color: #000;
    border-bottom-width: 1px;
}
#logo a {
    background-image:url(logo.png);
    display:block;
    width:128px;
    height:32px;
}
#logo a:hover {
    background-image:url(logohover.png);
    display:block;
    width:128px;
    height:32px;
}
#logo a:focus {
    background-image:url(logoonclick.png);
    display:block;
    width:128px;
    height:32px;
}

以下是HTML：

<div id="header">
    <div id="logo">
        <a href="#"></a>
    </div>
</div>

---

因此，基本上我希望链接或图像在被单击后保持“单击”的形式，如果再次单击，我希望它从更改回其标准。

最简单的方法是使用Javascript切换链接上的类，然后将该类添加到a:hover的CSS中

在jQuery中，这看起来像：

$('#logo a').click(function() {
    $(this).toggleClass('clicked');
});

然后更改CSS以添加新类：

#logo a:hover, .clicked {
    /* ... */
}

---

如果您不想使用Javascript，还可以将

a:visted

设置为类似于悬停状态的样式-单击时，链接看起来就像仍然被单击一样。但是，您无法仅使用CSS将其更改回预单击状态。

最简单的方法是使用Javascript在链接上切换类，然后将该类添加到a:hover的CSS中

在jQuery中，这看起来像：

$('#logo a').click(function() {
    $(this).toggleClass('clicked');
});

然后更改CSS以添加新类：

#logo a:hover, .clicked {
    /* ... */
}

---

如果您不想使用Javascript，还可以将

a:visted

设置为类似于悬停状态的样式-单击时，链接看起来就像仍然被单击一样。但是，您将无法仅使用CSS将其更改回预单击状态。

如果您将a元素替换为输入[type=checkbox]和标签，您可以使用：checked pseudeselector获得所需的内容：

HTML:

---

如果用输入[type=checkbox]和标签替换a元素，您可以使用：checked pseudeselectror:

HTML:

没有带有html或css的onclick处理程序。这可以通过使用javascript实现。没有html或css的onclick处理程序。这可以通过使用javascript实现。

placesheen

是我的新默认占位符。抱歉

placekitten

（和

placedog

）。谢谢，但这会使图像成为链接吗？@Awat Langø：我不明白你想要实现什么。如果你希望这是一个链接，为什么要在点击后显示不同的图片？对不起。这就是我想要实现的；我希望它在单击后显示图像下的列表，因此我希望在显示列表时图像处于活动状态。是否使用Javascript显示列表？

placesheen

是我的新默认占位符。抱歉

placekitten

（和

placedog

）。谢谢，但这会使图像成为链接吗？@Awat Langø：我不明白你想要实现什么。如果你希望这是一个链接，为什么要在点击后显示不同的图片？对不起。这就是我想要实现的；我希望它在单击后在图像下显示一个列表，因此我希望在列表显示时图像处于活动状态。是否使用Javascript显示列表？