活动时更改链接图像
我有3个链接，代表了我的页面中一个iFrame的内容。当您单击每个链接时，它将重新加载该iFrame的内容，而不会重新加载页面。
当我的链接处于活动状态时，如何将其图像设置为更改？
下面是我的代码：
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>CSS代码：
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}它似乎不起作用..:o当我在链接上按住鼠标时，我只能看到图像的变化，但当我单击它时，图像仍然保持不变，就好像它不是活动的选项卡一样。：不，谢谢！
回答 2
Stack Overflow用户
发布于 2010-01-19 23:30:44
我没有看到访问过的样式吗？仅活动和悬停状态。
添加
#gallery a:visited{}样式，看看这是否有帮助。
但我想知道这是不是你真正想要问的？如果这是用户单击的最后一个链接，您可能希望显示与其他链接不同的链接。要做到这一点，你可能需要使用一些javascript。
例如，如果你使用jQuery，你可以这样做：
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});其中ActiveClass是用于适当设置链接样式的CSS类。
根据下面的评论进行编辑。
让我们假设您有三个看起来相同的链接(称之为lookA)。单击其中一个，它看起来与其他两个(lookB)不同，但其他两个看起来仍然相同(lookA)。然后单击第二个链接。第二个链接不是lookB，另外两个链接是lookA。这听起来像你想要的吗？至少我是这样解释你的问题的。
因此，在CSS中创建两个类：
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}当然，您可以使用更有意义的名称。
然后，您可以向此场景中需要使用的每个链接添加一个类，如下所示：
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>这样每个链接都可以被它的类引用，也就是imagelink。此外，每个链接都有一个默认的lookA。
现在在jQuery中(我知道您没有指定jQuery，但使用它比普通Javascript简单100倍)：
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});因此，在单击链接时，它会从任何其他链接中删除lookB，并仅将其应用于所单击的链接。
希望这能对你有所帮助。
Stack Overflow用户
发布于 2010-01-19 23:30:26
我相信选择器是：
#gallery a:focus {...}
然而，这(不可避免地)在不同的浏览器之间应用。
Stu Nicholls在CSS Play上有一个演示，这个演示是删除焦点元素的默认轮廓，否则样式单击的元素。
这可能更可靠地使用jQuery来实现，但也可以使用CSS来实现。
https://stackoverflow.com/questions/2094555
复制相似问题
腾讯云开发者
