活动时更改链接图片

Question

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

它似乎并没有工作..：OI只能看到图像的变化时，我按住鼠标上链接，但是当我点击它时，图像保持不变，如果它不是活动选项卡。 ：o谢谢！

Answer 1

相信选择器是：

#gallery a:focus {...}

这（不可避免地）施加可变跨浏览器，但是。

Stu Nicholls在CSS Play上进行了演示，此演示旨在移除焦点元素的默认轮廓，并以其他方式设置单击元素的样式。

大概这可以通过jQuery更可靠地实现，但它可以用CSS来完成。

Answer 2

我没有看到访问的风格？只有活动和悬停。

添加

#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> 

使每一个环节都通过其类被refered来，就是ImageLink的。每个链接都有一个默认的lookA。

jQuery中

现在（我知道你没有指定的jQuery但使用它比普通的JavaScript简单100倍）：

$(document).ready(function(){ 
    $(".imagelink").click(function(){ 
     $(".imagelink").removeClass("lookB"); 
     $(this).addClass("lookB"); 
     return true; 
    }); 

}); 

所以在点击该链接后，它从任何其他链接删除lookB和仅将它应用于点击链接。

希望这会有所帮助。